Абсолютная позиция в линейном блоке

Question

У меня есть некоторые проблемы с абсолютной позицией для встроенных элементов.

Например:

.text {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="text">Proin porttitor sapien vitae felis maximus, in molestie sem egestas. Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus.<span class="element"></span></span> Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet

Результат:

Нужно получить что-то вроде этого:

Черная линия должна быть элементом HTML.

Пожалуйста, помогите мне.

Answer 1

Единственный способ, которым я могу придумать, - это скомбинировать разметку и выровнять их друг над другом, а затем покрыть нужную часть.

[container] {
  position: relative;
  animation: alter 5s linear infinite alternate;
  width: 200px;
  height: 200px;
}

[text],
[mask] {
  padding: 10px;
  border: 1px solid;
  display: inline-block;
}

[mask] {
  position: absolute;
  left: 0;
  top: 0;
  color: #d9020200;
}

[mask]>[cover] {
  background: black;
}

@keyframes alter {
  to {
    width: 400px;
    height: 400px;
  }

<div container>
  <span text>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
    </span>
  <span mask>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum <span cover>corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>Necessitatibus
  veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
  </span>
</div>

Answer 2

Если вы хотите скрыть свой текст, мы можем раскрасить текст:

.spoiler {      
  color:transparent;
  background-color: black;
}

<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <span class="spoiler"> 1 start Proin porttitor sapien vitae felis maximus, in molestie sem egestas.
            Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus. 1 start
        </span>
        Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet
    </p>