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