How to Style RankMath FAQ Blocks with Custom CSS

The RankMath FAQ block outputs clean, semantic HTML — but the default styling is plain. With a single CSS snippet, you can transform it into a polished FAQ section with rounded containers, visual separators, and custom icons.

Here’s the exact CSS we use on our own site, and how to add it to yours.

The problem

RankMath’s FAQ block generates proper FAQ schema markup, which is great for SEO. But the visual output inherits your theme’s default styles — usually just plain headings and paragraphs with no visual grouping. On content-heavy pages, the FAQ section blends into the rest of the article and looks unfinished.

The CSS snippet

Add this CSS via your theme’s customizer, a code snippets plugin like Code Snippets Pro, or your child theme’s style.css:

/* ── Rank Math FAQ Styling ── */

.rank-math-list {
  background: #f8fafa;
  border: 1px solid #e2e8e9;
  border-radius: 12px;
  padding: 8px 0;
  margin: 2rem 0;
}

.rank-math-list-item {
  padding: 20px 28px;
  border-bottom: 1px solid #e2e8e9;
}

.rank-math-list-item:last-child {
  border-bottom: none;
}

h3.rank-math-question {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px 0;
  padding-left: 28px;
  position: relative;
}

h3.rank-math-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232F5D62'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.rank-math-answer {
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.65;
}

.rank-math-answer p {
  margin: 0;
}Code language: CSS (css)

What this does

Rounded container — wraps all FAQ items in a light card with subtle border
Visual separators — a thin line between each question/answer pair
Scaled-down questions — 18px instead of the default H3 size, so FAQ headings don’t compete with your article headings
Info icon — a teal circle-info icon via inline SVG, no extra HTTP requests
Indented answers — aligned under the icon for clean visual hierarchy

Why open list instead of accordion

For FAQ sections with 3–7 questions, an open list beats an accordion toggle:

All content is visible to Google without JavaScript
Faster page load — no toggle scripts needed
Better UX on short lists — users don’t have to click to reveal each answer
Works perfectly with RankMath’s FAQ schema markup

Customization tips

Change #f8fafa to match your brand’s background color
Swap the SVG fill color %232F5D62 (URL-encoded #2F5D62) to your brand accent
Adjust font-size: 18px on the question if your theme uses different heading scales
Remove the ::before pseudo-element entirely if you prefer no icons

Frequently asked questions

How do I style RankMath FAQ blocks without a plugin?

You can style RankMath FAQ blocks using pure CSS — no extra plugin needed. Add a CSS snippet targeting the .rank-math-list class and its child elements via your themeu0027s customizer, a code snippets plugin, or your child themeu0027s style.css. The snippet in this article gives you rounded containers, separators, and custom icons with zero JavaScript.

Does custom CSS affect RankMath FAQ schema markup?

No. RankMathu0027s FAQ schema is generated from the blocku0027s structured data, not from how it looks visually. You can completely restyle the FAQ section with CSS without breaking the FAQ rich snippet in Google search results. The schema output stays identical regardless of your styling.

Should I use an accordion or open list for RankMath FAQ?

For short FAQ sections (3u20137 questions), an open list is better. All answers are visible without clicking, which means Google can crawl them without JavaScript, the page loads faster, and users see everything at once. Accordions make more sense for 10+ questions where the page would get too long.

Can I change the RankMath FAQ icon and colors?

Yes. The CSS snippet uses an inline SVG for the icon, so you can swap the fill color by changing the URL-encoded hex value (e.g., %232F5D62 for teal). You can also change the background color, border color, and text colors to match your brand. Remove the ::before pseudo-element entirely if you prefer no icon.

Where do I add custom CSS for RankMath FAQ in WordPress?

The safest options are: (1) a code snippets plugin like Code Snippets Pro — keeps your CSS in the database, survives theme updates, and can be toggled on/off; (2) your child themeu0027s style.css; or (3) the WordPress Customizeru0027s Additional CSS section. Avoid editing your parent theme directly, as updates will overwrite your changes.

Will this CSS work with other FAQ plugins besides RankMath?

This specific snippet targets RankMathu0027s CSS classes (.rank-math-list, .rank-math-question, .rank-math-answer). Other FAQ plugins use different class names, so youu0027d need to adjust the selectors. However, the approach — using CSS for styling instead of JavaScript — works with any FAQ plugin.

That’s it — one CSS snippet, no plugins, no JavaScript. Your RankMath FAQ sections will look intentional instead of like an afterthought.