Is it possible to add a line at half the height of the text?

Question

Layout

Good morning, is it possible to add a line with ?

.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

I centered the text, but the line stays on the left edge due to left: 0; Can it be corrected?