Как можно сделать такое подчеркивание в css?

Question

[Yunique]

Подскажите пожалуйста, можно ли сделать такое подчеркивание элемента меню не используя ::before и ::after ?

Я сделал так:

.menu__pointer {
display: flex;
justify-content: center;
}

.menu__pointer::before {
content: '';
width: 0;
height: 2px;
margin-right: 1px;
background-color: #008ed6;
display: block;
}

.menu__pointer::after {
content: '';
width: 0;
height: 2px;
margin-left: 1px;
background-color: #008ed6;
display: block;
}

.menu-item__link:hover .menu__pointer::before, .menu-item__link:hover .menu__pointer::after {
width: 50%;
}

Но кажется это решение очень громоздкое. Можно ли уместить все в один идентификатор?

Answer 1

[alex]

https://jsfiddle.net/1ngwht25/

<span>Testimonials</span>

span {
	background-image: linear-gradient(to right, red, red), linear-gradient(to left, red, red);
	background-size: 0 2px;
	background-position: bottom left, bottom right;
	background-repeat: no-repeat;
	transition: background-size .2s ease-in-out;
}

span:hover {
	background-size: calc(50% - 2px) 2px;
}