html - 使用 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.

请注意文本 block 宽度是可变的，这就是使 block 行数增加的原因。

是否有仅 CSS 解决此问题的方法？

Answer 1

除非你有几十万行，否则你可以使用内容为|\a的伪元素(| and \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>