Add A Line Through Your Titles With CSS

There’s a lot of creative things you can do to make the typography unique on your website. A web designer friend of mine, Nina Cross, showed me a simple trick you can do to make your titles stand out. In the example below, you can see the technique that adds some extra contrast to the title.

Example Title

This can be achieved with a few simple lines of CSS.

Here’s the CSS:

h2 {
    text-align: center;
    display: block;
    margin: 60px 0 50px 0;
    line-height: 0;
    border-bottom: 1px solid #aaa;
}

h2 span{
        background-color: #fff;
        padding: 0 15px;
}

The trick is giving it a border and a line-height of 0. This recreates the “strikethrough” design you see in word processing programs and Photoshop. You also need to wrap the title within a span that has a background-color value that matches default background. Without the span, the border would be covering the text. You can then adjust the left and right padding on the span to tweak how close the line is to the title.

Here’s the HTML:

    Example Title

Super easy, right? Have you done anything creative with your headers in CSS? Feel free to share in the comments section!