Heading with a horizontal line in the middle

One way to make a heading with a horizontal line in the center without an image (background-image).

There is a drawback - the background under the title must be monochromatic, otherwise the <span> will be visible.

<div class="title">
	<span>Recommended</span>
</div>
HTML
.title {
	font-size: 20px;
	color: rgb(50, 50, 50);
	text-transform: uppercase;
	line-height: 1.5;
	text-align: center;
	position: relative;
}
.title span {
	background: #fff;
	display: inline-block;
	padding: 0 18px;
	position: relative;
}
.title:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;        
	width: 100%;
	height: 2px; /* line width */
	background: #f3f4f2; /* line color */
}
CSS

Result:

07.12.2016, updated 09.04.2021
51

Comments

to add a comment.

Other publications

Aligning a block to the center of its parent
Examples of how to position an element in the center of its parent using absolute, flexbox and grid layout.
85
0
Links to messengers from the site
HTML links to open chat and other functions of popular instant messengers.
40
0
Vertical alignment of text in a block
A way to vertically align text in blocks of fixed height. The text is wrapped in a tag with a .child class, followed by...
30
0
The viewport meta tag
Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
34
0
Connecting fonts in CSS
If you do not delve into the details, you can quickly connect the font like this ...
78
0
Collection of CSS gradients
A selection of 23 backgrounds with linear and radial gradients.
150
0