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:
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.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.title {7
white-space: nowrap;8
font-size: 25px;9
display: flex;10
}11
12
.title::after, .title::before {13
margin: 0 5px;14
position: relative;15
top: 0.55em;16
background: black;17
flex: 1;18
height: 0.05em;19
content: '';20
}21
22
</style>23
</head>24
<body>25
<div class="title">Example Title</div>26
</body>27
</html>
