Line On Sides Headers

Understanding the Line-on-Sides Pattern

Line-on-sides headers, sometimes called "legend-style" headings, feature decorative horizontal lines extending from both sides of centered text. This design pattern has remained popular because it creates clear visual separation between sections while maintaining a professional, polished appearance.

What makes this pattern interesting from a CSS perspective is the challenge of creating lines that respond gracefully to variable text lengths, different font sizes, and responsive layouts without requiring additional HTML markup. The decorative lines must adapt to the unpredictable width of text content, and when text is centered, the available space on either side varies based on character count, font family, and base font size. A robust solution must handle single-word headings, long multi-word titles, and everything in between without breaking the design.

Early solutions often relied on fixed widths or percentage-based approximations that broke when text wrapped to multiple lines. The most elegant approaches use CSS layout mechanisms that automatically calculate the space remaining after the text content, distributing that space to the decorative lines on either side.

This pattern appears frequently in professional web design for section headers, portfolio layouts, and blog indexes, and plays an important role in SEO-friendly website structure. Modern CSS has evolved significantly, offering multiple approaches from the original pseudo-element technique to elegant Flexbox and CSS Grid solutions for building maintainable frontend architectures.

The Classic Pseudo-Element Approach

The original technique, as documented on CSS-Tricks, wraps heading text in an inline-block span and uses ::before and ::after pseudo-elements to create the decorative lines. This approach creates a pseudo-element on each side of the text, positioned absolutely relative to the span. Each pseudo-element uses border-top and border-bottom properties to create double horizontal lines, with margin settings to space them appropriately from the text content.

This technique works by creating lines that are intentionally wider than needed and allowing them to extend beyond their container. Adding overflow: hidden to the parent container ensures the lines appear to stop at the container edges while actually being much longer. However, the line-height: 0.5 "magic number" centers the lines relative to text but depends on the specific font being used and may need adjustment for different typefaces. The fixed width of 600 pixels works for most desktop layouts but may need recalculation for wider screens or responsive containers. When text wraps to multiple lines, the absolute positioning can cause the lines to appear disconnected from the text block.

The Flexbox Solution

Flexbox provides a significantly cleaner solution for line-on-sides headers, as demonstrated in Trys Mudford's modern CSS approach. By setting the heading container to display: flex and using justify-content: center, the text becomes centered within its container. The pseudo-elements then become flex items that automatically fill the remaining space on either side.

The flex: 1 0 20px declaration tells each pseudo-element to grow to fill available space (flex-grow: 1), not to shrink below its base size (flex-shrink: 0), and to start with a minimum width of 20 pixels. This ensures the lines always extend to fill the container minus the text width and the margin on each side. The Flexbox approach eliminates the need for a wrapper span, removes reliance on overflow hiding, and automatically responds to container width changes without requiring recalculation of fixed widths.

The CSS Grid Solution

CSS Grid offers the most sophisticated approach to line-on-sides headers, providing explicit control over column widths and spacing. By defining a three-column grid with the text content in the center column and the decorative lines in the side columns, we achieve precise control over the layout.

The grid-template-columns definition uses minmax(20px, 1fr) for the side columns, which establishes a minimum width of 20 pixels while allowing the columns to grow proportionally to fill available space. The center column uses auto to size itself based on the text content. The Grid approach provides the cleanest separation of concerns, as the grid definition handles all spacing calculations, removing the need for margin manipulation on pseudo-elements. The gap property is more intuitive than margin-based spacing and easier to adjust globally.

Single-Line Variations and Customization

Some designs call for single decorative lines rather than the double-line style. This variation requires only minor adjustments to either the Flexbox or Grid approach, removing the double-border effect in favor of a single line. The flex: 1 1 0 value tells the pseudo-elements to grow and shrink equally while maintaining a base size of zero, allowing the border to determine the line width.

Line-on-sides headers offer numerous customization options for theming and brand alignment. Using CSS custom properties (variables) enables easy theming across multiple headers and supports dark mode adjustments through media query overrides or class-based theming. Line thickness is controlled through the border-width value, allowing subtle 1-pixel lines or bold 4-pixel lines depending on the desired visual weight. The spacing between decorative lines and text can be adjusted using the gap property (Grid) or margin values (Flexbox) based on your typography choices.

Responsive Design Considerations

Responsive line-on-sides headers require consideration of how the pattern behaves across viewport widths. On very narrow screens, the decorative lines may have minimal space to display, potentially resulting in lines that are too short to read clearly or that disappear entirely. A mobile-first approach adds decorative lines only at larger breakpoints using media queries.

When headings contain more text than fits on a single line, both Flexbox and Grid approaches handle wrapping automatically. On wrapped text, the decorative lines appear above the text block rather than alongside individual lines, which is typically acceptable and often intentional. The lines create separation between the heading and the following content rather than decorating each individual line of text.

Accessibility Considerations

Decorative lines created with pseudo-elements should not interfere with screen reader navigation or visual reading flow. The techniques discussed use pseudo-elements with empty content (content: ""), which screen readers typically ignore. This means the decorative lines remain visual-only enhancements that don't add noise to assistive technology output.

Ensure that heading hierarchy remains semantic. The decorative lines should not cause developers to choose inappropriate heading levels (h1 through h6) based on visual weight rather than document structure. When decorative lines use colors different from heading text, ensure both colors meet contrast requirements for accessibility compliance. Lines that extend to container edges may pass through areas with different background colors, requiring additional consideration of contrast against each potential background.

Performance and Browser Support

The Flexbox approach for line-on-sides headers enjoys excellent browser support, with Flexbox supported in all modern browsers and Internet Explorer 11 with some known issues. The CSS Grid approach requires Grid layout support, which is available in all modern browsers but not in Internet Explorer. For projects requiring IE11 support, the Flexbox approach or the classic pseudo-element technique remain viable options.

Both Flexbox and Grid techniques avoid JavaScript dependencies, making them performant choices that don't require feature detection or fallbacks. The border-based lines used in these techniques are computationally inexpensive compared to alternatives like background gradients or box-shadows. The techniques add minimal CSS to stylesheets and don't require additional HTTP requests for images or fonts, making them well-suited for performance-conscious projects.

Conclusion

Line-on-sides headers remain a valuable design pattern for creating clear visual hierarchy and professional presentation in web layouts. Modern CSS has evolved to make this pattern easier to implement and more flexible than the original techniques. Whether using Flexbox, CSS Grid, or the classic pseudo-element approach, developers now have multiple well-supported options for creating decorative lines that enhance rather than complicate their designs.

The Flexbox approach represents the best default choice for most projects with its balance of browser support, code clarity, and customization ease. Projects already using CSS Grid extensively may prefer the Grid approach for consistency with their existing patterns. With the techniques covered in this guide, you can implement line-on-sides headers that are responsive, accessible, and easy to maintain over time.

Looking to implement modern CSS techniques across your website? Our web development team specializes in creating polished, professional designs using the latest CSS best practices and performance optimization strategies.

Sources

1. CSS-Tricks - Line-On-Sides Headers - The canonical article on this CSS technique by Chris Coyier
2. Trys Mudford - Line on side headings in CSS - Modern Flexbox and CSS Grid solutions
3. MDN Web Docs - CSS Logical Properties - CSS text decoration properties reference