Separator Line with a Middle Element in CSS

This is a short post describing how to create a separator line with an element in the middle, like a kind of divider with text or an image when there is the same separator line to the left and right for decoration.

So, let’s say I ask you to create a separator line with an image/text in the middle, and it should be responsive, of course. I assume you would use flexbox and do something like this:

<span>
    <img src="deco.svg">
</span>

And the CSS looks like this:

span {
    display: flex;
    align-items: center;
}

span:before, span:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    margin: 0 12px;
    background: #333;
}

span:before {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
    background: linear-gradient(to right, #818078, transparent);
}

span:after {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
    background: linear-gradient(to right, transparent, #818078);
}

img {
    width: 40px;
}

The result will look like this:

However, there is another, perhaps even more semantic way to do this using the <hr> element, where the markup would look like this:

<hr>

The CSS would be like this:

hr {
    position: relative;
    border: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

hr:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
}

hr:after {
    content: "";
    position: relative;
    padding: 0 20px;
    background: #fcfcfa url('deco.svg') no-repeat center center;
    background-size: contain;
    width: 40px;
    height: 40px;
}

The result is the same:

If you plan to use this on your website, keep in mind that there are no hard and fast rules that override or interfere with the CSS presented in this post.

In any case, we’ve shown how to do this for an image with separating lines to the left and right. But, for example, if you wanted to do this with text, you could make it more interesting and use a data attribute. It would look like this:

<hr data-content="Separator">

The CSS for this would be:

hr {
    position: relative;
    border: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    font-size: 28px;
}

hr:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
}

hr:after {
    content: attr(data-content);
    position: relative;
    padding: 0 20px;
    color: #818078;
    background-color: #fcfcfa;
    line-height: 1;
}

And the result looks like this:

This method has one downside, as search engines don’t scan text in data attributes. So, if the text is essential, do not use this method, only in situations where the separator is decorative and decorative only.

If you want to display and maintain the primary value for search engines, you can use the first method I presented in the post.

You Can Also Do This with CSS Grid

By the way, the same first example can also be achieved using CSS grid and the minmax function. So, the markup is simple:

<h3>Title</h3>

And here’s the CSS:

h3 {
    margin: 0;
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    grid-gap: 20px;
    font-weight: 400;
    font-size: 28px;
    color: #818078;
}

h3:before,
h3:after {
    content: '';
    height: 1px;
}

h3:after {
    background: linear-gradient(to right, transparent, #818078);
}

h3:before {
    background: linear-gradient(to right, #818078, transparent);
}

Here’s the result:

If we play with the CSS a bit, combining it with text-shadow, we can create some beautiful effects. Here’s an example:

Did you like it? Please like and share with your friends… 🙂