CSS Styles that’ll make your Rank Math FAQ blocks stand out

Rank Math SEO is arguably one of the most popular and robust optimization plugins for WordPress, and I have already written many articles about it. This time around, I’d like to share some CSS styles for the “FAQ” block that I have hanging around.

If you aren’t already using it, the FAQ block comes with Rank Math SEO, and it’s a great way to answer all of your readers’ most common questions. Apart from giving your visitors more information about each topic, it’s also boosting your article’s SEO, giving Bing and Google more details about what you’ve written.

Now, you may be wondering: Why didn’t the team behind the plugin create more styles for the FAQ block? Well, simply put, the folks behind Rank Math have a thousand other things to worry about, including introducing new features, making sure their system is as secure as it can be, keeping it compatible with WordPress’s latest versions and with other third-party plugins, fixing errors and bugs, and so much more.

Get the latest version of Rank Math SEO here.

Thankfully, with a few lines of CSS code that you can easily copy and paste on your WordPress website, you’ll be able to adjust the FAQ block’s styling. Keep in mind that these CSS codes will only work with Rank Math SEO and not other SEO plugins.

Where to paste these codes?

1. Log in to your WordPress Dashboard.
2. Go to Appearance -> Customize.
3. From the left sidebar, click on Additional CSS.
4. Paste the CSS code there and wait until the page refreshes.
5. Click “Publish” to save the changes.

If you want to test each CSS style before publishing your changes, once you’re inside the Customizer, head over to a post or page that has an FAQ block inserted. Once you paste the code, the page will automatically get refreshed, and you’ll be able to see the changes.

You can change the colors using the HEX numbers, which I’ve placed in bold letters.

1. Minimal FAQ Block with Grey Background

Style Example:

CSS Code:

/* Rank Math Questions */

.rank-math-question {
	font-weight: 600;
}

/* Rank Math Answers */

.rank-math-answer {
	background-color: #f9f9f9;
	border-radius: 8px;
	padding-top: 20px;
	padding-bottom: 1px;
	padding-right: 25px;
	padding-left: 25px;
	margin-bottom: 25px;
}

---

2. Bold Colored Border Left FAQ Block

Style Example:

CSS Code:

.rank-math-question {
	font-weight: 600;
}

/* Rank Math Answers */

.rank-math-answer {
  border-left: 5px solid #0073e6;
  background: #f0f8ff;
  padding: 10px 16px;
  font-weight: bold;
}

/* Rank Math Reviews */

@media (min-width: 1px){
#rank-math-rich-snippet-wrapper img {
	border-radius: 8px;
	box-shadow: 0px 0px 30px 0px #00000020;
}
}

---

3. FAQ Accordion Look (Static)

Style Example:

CSS Code:

/* Rank Math Questions */

.rank-math-question {
  background: #eee;
  padding: 12px 16px;
  cursor: pointer;
  border: 3px solid #ccc;
}

/* Rank Math Answers */

.rank-math-answer {
  background: #fff;
  padding: 20px 20px; 0px; 0px;
  border: 3px solid #ccc;
  border-top: none;
  margin-bottom: 20px;
  margin-top: -20px;
}

---

4. Blue Themed Rounded Cards

Style Example:

CSS Code:

/* Rank Math Questions */

.rank-math-question {
  background: #e6f0ff;
  padding: 14px 20px;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}

/* Rank Math Answers*/

.rank-math-answer {
  background: #f4f9ff;
  padding: 14px 20px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 20px;
}

---

5. Dark Mode Inspired

Style Example:

CSS Code:

/* Rank Math List*/

.rank-math-list {
  background: #1c1c1c;
  padding: 5px 25px 5px 25px;
  border-radius: 12px;
	margin-bottom: 40px;
}

/* Rank Math Questions*/

.rank-math-question {
  color: #fff;
  font-weight: bold;
}

/* Rank Math Answers*/

.rank-math-answer {
  color: #bbb;
  margin-bottom: 0px;
}

---

6. Colorful Gradient Header

Style Example:

CSS Code:

/* Rank Math Questions*/

.rank-math-question {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
  padding: 12px 16px;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

/* Rank Math Answers*/

.rank-math-answer {
  background: #fff0f5;
  padding: 12px 16px;
  border-radius: 0 0 8px 8px;
  margin-bottom: 20px;
}

---

7. Underline Accent

Style Example:

CSS Code:

/* Rank Math Questions*/

.rank-math-question {
  border-bottom: 2px solid #00aaff;
  font-weight: bold;
  padding-bottom: 6px;
  margin-bottom: 15px;
}

/* Rank Math Answers*/

.rank-math-answer {
  margin-bottom: 20px;
  color: #222;
}

---

8. Boxed Layout with Emoji and Gradient

Style Example:

CSS Code:

/* Rank Math Questions*/

.rank-math-question {
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
  padding: 14px 20px;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
  color: #333;
}

/* Rank Math Icon Before*/

.rank-math-question::before {
  content: "📌 ";
  margin-right: 5px;
}

/* Rank Math Answers */

.rank-math-answer {
  background: #fff7f0;
  padding: 20px 20px 1px 20px;
  border-radius: 0 0 12px 12px;
  margin-bottom: 20px;
}

---

9. Happy Icon Inline on Left

For this one, you can change both the background colors and the icons. If you’re using Windows, you can launch the pop-up window with the Emojis by pressing Windows Key + . (dot) buttons on your keyboard.

Style Example:

CSS Code:

/* Rank Math Questions*/

.rank-math-question {
  background: #e0f7fa;
  border-radius: 20px 20px 0 20px;
  padding: 16px;
  margin-bottom: 4px;
  position: relative;
  font-weight: bold;
}

/* Rank Math Icon Before Question*/

.rank-math-question::before {
  content: "🙋";
  font-size: 1.2em;
  margin-right: 8px;
  display: inline;
}

/* Rank Math Answers*/

.rank-math-answer {
  background: #f1f8e9;
  border-radius: 20px 20px 20px 0;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Rank Math Icon Before Answer*/

.rank-math-answer::before {
  content: "💬";
  font-size: 1.2em;
  flex-shrink: 0;
  line-height: 1.4;
}

---

10. Futuristic Terminal / Matrix-Inspired FAQ Style

The 💾 icon inside the “Answers” block constantly blinks to give that extra futuristic feeling. If you want to disable the automatic blinking, simple remove this line of code animation: blink 1s infinite step-end; from the .rank-math-answer::before section.

Style Example:

CSS Code:

.rank-math-list {
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(0, 255, 100, 0.1);
  font-family: 'Courier New', Courier, monospace;
  color: #00ff88;
}

.rank-math-question {
  position: relative;
  background-color: rgba(0, 255, 100, 0.05);
  border-left: 4px solid #00ff88;
  padding: 14px 20px;
  margin-bottom: 8px;
  border-radius: 6px;
  font-weight: bold;
  text-shadow: 0 0 5px #00ff88;
}

.rank-math-question::before {
  content: "🤖 ";
  margin-right: 8px;
  animation: flicker 2s infinite alternate;
}

.rank-math-answer {
  background-color: rgba(0, 255, 100, 0.08);
  padding: 14px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  border-left: 4px solid #00cc66;
  text-shadow: 0 0 2px #00ff88;
  position: relative;
  display: flex;
  gap: 10px;
}

.rank-math-answer::before {
  content: "💾";
  flex-shrink: 0;
  font-size: 1.2em;
  margin-top: 2px;
  animation: blink 1s infinite step-end;
}

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

---

Looking for something more specific? Let me know in the comments down below, and I may be able to create it for you!

Keep this article saved in your bookmarks, because I’ll keep updating it with even more styles in the near future.

Uh, oh! Legal stuff! Yikes.. Yet important! Affiliate Links Disclaimer: Many of the links on my articles are affiliate links. That means if you click on one and make a purchase, I might earn a small commission, and I'll keep doing what I'm doing, reviewing everything with absolute honesty. Sounds good? Good.