WP Templater
Editor RecipesInline Badge (::after)
Editor Recipes

Inline Badge editor recipe

Add a small inline uppercase badge after specific elements inside a Kadence Row or Section using the Inline Badge block editor recipe.

What the Inline Badge recipe does

Inline Badge adds a small uppercase badge directly after selected elements inside a Kadence Row Layout or Section block.

The recipe uses the CSS ::after pseudo-element to:

  • Target any child element inside the row or section that uses a class you specify.
  • Append a short, uppercase text badge as generated content after that element.
  • Keep the badge inline so it flows naturally with the surrounding text.

This is an editor utility recipe, applied through X-Bar and scoped to a single Kadence Row Layout or Section block.

Inline Badge includes placeholder values. After you paste the recipe:

  • Replace .replace-me-class with the actual class on the child element you want to badge.
  • Replace the placeholder content string with your badge text, such as "NEW", "BETA", or "PRO".

Where to apply the recipe in the block editor

Attach Inline Badge to a specific Kadence Row Layout or Section block so it only affects that block, not the entire page.

  • Scope: The recipe uses the Kadence selector keyword to scope the CSS to the selected Row Layout or Section.
  • Targeting: Inside that block, the CSS looks for child elements with the class you specify, then attaches the inline badge after them.

Add Inline Badge with X-Bar

Use these steps every time you want to add an inline badge to a row or section.

Select the Kadence Row Layout or Section block

In the editor, click the Kadence Row Layout or Section block that should contain the inline badge. Keep this block selected so X-Bar knows where to attach the recipe.

Open X-Bar and choose the CSS-Recipes editor

Open X-Bar while the block is selected, then switch to the editor area used for CSS recipes. This editor attaches styles directly to the selected block and scopes them with Kadence's selector keyword.

Paste the Inline Badge recipe

Paste the Inline Badge recipe code into the X-Bar editor. The recipe uses ::after on the selector that includes Kadence's keyword so it only affects child elements inside this row or section.

Customize the target class and badge text

Update the placeholder values in the recipe:

  • Change .replace-me-class to the actual class on the child element that should receive the badge (for example, a heading, link, or label).
  • Change the content value to your uppercase badge text, such as "NEW", "SALE", or "PRO".

Add the class to the target element and preview

Edit the child element inside the same Kadence block and add the class you used in the recipe. Preview the page to confirm the badge appears inline after that element and matches your text.

How Inline Badge works

Inline Badge relies on generated content and scoped selectors:

  • The recipe is attached to the Kadence Row Layout or Section via X-Bar, using Kadence's selector keyword so it only affects that specific block.
  • Inside that block, it targets any child element that uses the class you configured instead of hard-coding a specific element type.
  • The ::after pseudo-element adds uppercase badge text as generated content immediately after the element.
  • Because it stays inline, the badge follows the same line flow as the text, sitting directly after the word or label you tagged.

This approach keeps your markup clean while giving you flexible, per-element badges inside the editor.

Use these related recipes and docs to combine Inline Badge with other editor utilities.

All CSS-Recipes

Overview of all available X-Bar CSS recipes, including frontend and editor utilities.

Container Badge (::before)

Add a badge attached to the container itself using the ::before pseudo-element.

Gradient Section Border (::before)

Apply a decorative gradient border around a Kadence Row Layout or Section.

Separator Line

Create a separator line utility for cleaner content separation in the editor.

Was this page helpful?

Last updated 2 days ago

Built with Documentation.AI