Можно ли на половину высоты текста добавить линию?

Question

[Alekosh Akhosh]

Доброе утро, можно ли добавить линию с помощью ?

.text {
  position: relative;
}

.text-decor {
  position: absolute;
  Width: 180px;
  Height: 8px;
  top: 10px;
  left: 0;
  background-color: red;
  opacity: 0.6;
}

<div class="text">
<p> another text </p>
</div>

<div class="text-decor"> </div>

Answer 1

[Артем Золин]

<p class="text-decor">another text</p>
<span class="text-decor">another text</span>

p, span {
	line-height: 1.25;
}

.text-decor {
	position: relative;
}

.text-decor::after {
	content: '';
	position: absolute;
	width: 100%;
	max-width: 180px;
	height: 50%;
	bottom: 0;
	left: 0;
	background: red;
	opacity: 1;
	z-index: -1;
}

Answer 2

[Alekosh Akhosh]

Я текст отцентрировал, но линия остается на левом краю из-за left: 0; Можно его исправить?

Comments

[Артем Золин]

Это будет костыль, лучше подчеркнутый текст оборачивать в спан, чтобы он был инлайновым

<p>some text <span class="text-decor">another text</span> some text</p>

Костыль

left: 50%;
transform: translateX(-50%);

PS. Пишите в комментариях к ответу, а не новый ответ

[Alekosh Akhosh]

Артем Золин, странно, вроде в комментарии писал. Но спасибо большое - помогло!