WordPress

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

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

In this article...

Make your FAQ and How-To sections look more minimal, modern, or colorful with these free CSS codes (along with their examples).

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.

Rank Math SEO - Default FAQ Style
Here’s how the default FAQ block by Rank Math SEO looks like.

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:

Rank Math SEO - Minimal FAQ Block with Grey Background

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:

Rank Math SEO - Bold Colored Border Left FAQ

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:

Rank Math SEO - FAQ Accordion Look (Static)

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:

Rank Math SEO - Blue Themed Rounded Cards

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:

Rank Math SEO - Dark Mode Inspired

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:

Rank Math SEO - Colorful Gradient Header

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:

Rank Math SEO - Underline Accent

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:

Rank Math SEO - Boxed Layout with Emoji and Gradient

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:

Rank Math SEO - FAQ Icon Inline on Left

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:

Rank Math SEO - Futuristic Terminal - Matrix-Inspired FAQ Style

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.

Panos Sakalakis

Meet Panos Sakalakis, a web wizard, blogging buff, podcasting pro, and SEO sorcerer with over 15 years of enchanting experience. When he's not weaving digital spells with his keyboard, you'll likely spot him conquering mountain trails with his trusty Hard-Trail MTB bike, in hot pursuit of the ultimate adrenaline rush and the perfect blog post inspiration.

google-news

Leave a Comment