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.

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

是否有仅CSS 个解决方案？

Answer 1

您可以使用渐变直观地进行设置。技巧是考虑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>

Answer 2

除非有成千上万的行，否则您可以使用内容为|\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>

使用CSS为每行添加前缀字符

2 个答案: