Skip to content

2021-02-01 views

Keyline heading pattern with CSS

Across this website I make use of a <Section.Title> component that adds a "keyline" after the title text. It's a small design flourish that helps section off content.

I am using Tailwind CSS for styling across the site, so the markup to achieve this pattern looks like the following.

html
<h2 class="flex items-center">
Hello world
<span class="ml-3 block h-px bg-gray-200 flex-1"></span>
</h2>

View the demo

If you were writing your own CSS, you could achieve the same pattern without the need for an extra span element.

html
<h2 class="keyline-heading">Hello world</h2>
css
.keyline-heading {
position: relative;
display: flex;
align-items: center;
}
.keyline-heading::after {
content: '';
flex: 1;
display: block;
margin-left: 1rem;
height: 1px;
background-color: #eee;
}

View the demo