CSS конец строки, чтобы добавить оформление

Question

Допустим, у вас есть длинный текст

, и вы хотите быстро (например, для всех размеров экрана) добавить что-то перед каждым разрывом строки.

Кодовая ручка здесь: https://codepen.io/jossnaz/pen/YgWmrR

выглядит так:

Я хочу, чтобы это выглядело так:

Например: добавьте символ _ в конце каждой строки, отвечая

HTML

<span>
  long long text long long text text  long long text long long text text long long text long long text text long long text long long text text 
</span>

<br>
<br>
<br>
<br>

<span>
  long long text long long text text  long long text long long text text long long text long long text text long long text long long text text 
</span>

CSS

span{
  max-width: 350px;
  display: inline-block;
}

br + span{
  max-width: 500px;
}

Answer 1

Вот идея с использованием фона и box-decoration-break.

p {
  max-width: 300px;
}

p>span {
  background: linear-gradient(#000, #000) right bottom/8px 1px no-repeat;
  padding-right: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat in ipsum. Aenean molestie dictum sem sed ornare. Aenean eleifend massa nunc, ut mollis mi bibendum quis. Ut at lorem lorem. Ut nisl est, scelerisque a augue at, fringilla tincidunt urna</span></p>

<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat in ipsum. Aenean molestie dictum sem sed ornare. Aenean eleifend massa nunc,</span></p>