Separator Line editor recipe

Separator Line (::after) overview

Separator Line adds a horizontal rule below a Kadence Row Layout or Section block without inserting extra Divider blocks into your content.

Use this recipe when you want a clean, full-width line to separate major sections of a page while keeping your block structure minimal and your layout easy to manage.

Where Separator Line applies

Separator Line only targets container-style blocks that define major layout sections.

• Supported blocks: Kadence Row Layout and Section blocks in the block editor.
• Scope: X-Bar uses the Kadence selector keyword so the CSS applies only to the selected block’s rendered output, not to other rows or sections.
• Result: The separator line appears immediately below that specific row or section, acting as a visual boundary between it and the next content.

If you need a separator that spans multiple blocks or regions, use a standard Divider block or a theme layout option instead of this recipe.

Apply Separator Line in the block editor

Use X-Bar to attach the Separator Line recipe to any Kadence Row Layout or Section.

How Separator Line works

Separator Line relies on a pseudo-element so you do not need to add extra markup or blocks.

• Uses the ::after pseudo-element: The recipe appends a visual horizontal rule below the targeted block using CSS ::after, so the separator is part of the block’s rendered output.
• Positions the line under the block: The pseudo-element is placed below the main content area of the row or section, creating a clean break before the next block starts.
• Respects Kadence global spacing: The gap between the content and the separator line uses the Kadence global spacing variable, so the vertical offset scales consistently with your site’s spacing system.
• Caps width at content width: While the line visually spans the section, its effective visual width is capped at the global content width, keeping it aligned with your overall content column and typography grid.

Because the recipe is attached at the block level and uses the Kadence selector keyword, you can reuse Separator Line on multiple rows or sections without them affecting each other.

When to use this recipe

Separator Line works best for structural section breaks rather than fine-grained content dividers.

Use it when you want:

• A consistent section divider across long pages, such as between major content bands.
• Separation between full-width rows that share the same background color, where spacing alone is not enough.
• A systematic visual rhythm that ties into Kadence’s global spacing and content width settings.

Avoid it when:

• You only need a small, inline mark within text; use a text or icon solution instead.
• The separation is highly decorative and unique to one section; create a custom block design instead of a reusable recipe.

Related editor recipes