JSFiddle - React, Tailwind, and code Playground

by atahta

HTML

<div class="section-description">
		<h2 class="section-title">Our services</h2>
		</div>

CSS

.section-title {position: relative; display: inline-block;}
.section-title:before {
	content: " ";
	width: 49%;
	height: 3px;
	position: absolute;
	bottom: 0;
	background-color: red;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.section-description:hover .section-title:before {
	content: "";
	width: 49%;
	height: 49%;
	z-index: -1;
	position: absolute;
	bottom: 0;
	background-color: red;
	display: block;
	margin-left: auto;
	margin-right: auto;
}