Explanation: Here, the main part is to use overflow: hidden; on the element, and than am creating a virtual element using an :after pseudo with content property, and am positioning it absolute to the parent element which am setting to relative
<h2>Hello World</h2>
h2 {
font-size: 20px;
font-family: Arial;
position: relative;
overflow: hidden;
}
h2:after {
display: inline-block;
content: "";
height: 4px;
background: #f00;
position: absolute;
width: 100%;
top: 50%;
margin-top: -2px;
margin-left: 10px;
}