Добавьте символ префикса для каждой новой строки, используя CSS

Question

Я ищу способ добавить префикс для каждой строки текста, используя только CSS.Префикс в настоящее время делается с помощью селектора :before, но я не знаю, можно ли его расширить до нескольких строк.Для первой строки префикс - звездочка *, а для следующих строк - труба |.

Вот представление о том, чего я пытаюсь достичь:

* Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo
| enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his
| ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.

Тот же текст, но разной ширины:

* Duo laudem labore interpretaris ne, maiorum 
| qualisque interpretaris mel id. Quo enim
| propriae eu, denique molestie definiebas mel 
| no. Solum integre mandamus his ne, sale
| hendrerit pro ut, ei has libris habemus 
| delicatissimi. Eu eum illud.

Обратите внимание, что текстовый блок ширина является переменной , и это то, что делает число строк в приращениях.

Есть ли только CSS решение этой проблемы?

Answer 1

Если у вас нет сотен тысяч строк, вы можете использовать псевдоэлемент с содержимым |\a (| и \a разрыв строки), просто добавьте их как можно больше.

p {
  position: relative;
  padding-left: 1em;
  overflow: hidden;
  width: 100px;
}

p:before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
}

p:after {
  content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a";
  white-space: pre;
  position: absolute;
  left: 0;
  top: 1em;
}

<p>Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.</p>

И, конечно, вы также можете сделать это только с одним псевдоэлементом.

p {
  position: relative;
  padding-left: 1em;
  overflow: hidden;
  width: 100px;
}

p:before {
  content: "*\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a";
  white-space: pre;
  position: absolute;
  left: 0;
  top: 0;
}

<p>Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.</p>

Answer 2

Вы можете сделать это визуально, используя градиент.Хитрость заключается в том, чтобы рассмотреть line-height, чтобы правильно повторить шаблон для каждой строки, а затем просто отрегулировать различные значения, чтобы контролировать размер линии и приблизиться к |

.box {
  padding-left:20px;
  font-size:25px;
  line-height:1.2em; /*This is used in the gradient so it should match*/
  background:
   repeating-linear-gradient(to bottom,
   transparent 0px, transparent 5px,
   #000 5px,#000 calc(1.2em - 2px),
   transparent calc(1.2em - 2px),transparent 1.2em) 
  4px 0/2px 100% 
  no-repeat;
}

<div class="box"> 
| Lorem ipsum dolor sit amet, consectetur adipiscing lorem | Proin pharetra felis eu arcu imperdiet, ac ultricies velit scelerisque. Curabitur mollis purus at dignissim pharetra. Donec in tortor in sapien vulputate pretium at eget risus. Fusce elementum ex ut eleifend accumsan. Aliquam dapibus eleifend malesuada. Vivamus ac mattis sapien, vitae interdum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>

Чтобы начать со второй строки, просто переведите ее и добавьте звездочку:

.box {
  padding-left:20px;
  font-size:25px;
  line-height:1.2em; /*This is used in the gradient so it should match*/
  background:
   repeating-linear-gradient(to bottom,
   transparent 0px, transparent 5px,
   #000 5px,#000 calc(1.2em - 2px),
   transparent calc(1.2em - 2px),transparent 1.2em) 
  4px 1.2em/2px 100% 
  no-repeat;;
}

.box:before {
  content:"*";
  margin-left:-20px;
  display:inline-block;
}

<div class="box"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra felis eu arcu imperdiet, ac ultricies velit scelerisque. Curabitur mollis purus at dignissim pharetra. Donec in tortor in sapien vulputate pretium at eget risus. Fusce elementum ex ut eleifend accumsan. Aliquam dapibus eleifend malesuada. Vivamus ac mattis sapien, vitae interdum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>