EN
CSS - add centered text in the middle of horizontal line
3
points
In this article, we would like to show you how to add centered text in the middle of horizontal line using CSS.
Preview:
Practical example
In this example, we use ::before and ::after pseudo elements to style title element to have horizontal line passing through the text. The key in this solution is to set height property to 0.05em (em means font size of the parent) and set offset top to 0.55em. With this we achieve the line effect right in the middle of the font size.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.title {
white-space: nowrap;
font-size: 25px;
display: flex;
}
.title::after, .title::before {
margin: 0 5px;
position: relative;
top: 0.55em;
background: black;
flex: 1;
height: 0.05em;
content: '';
}
</style>
</head>
<body>
<div class="title">Example Title</div>
</body>
</html>