Html 使用CSS为每一行添加前缀字符
我正在寻找一种只使用CSS为每行文本添加前缀的方法。当前前缀是：before selector，但我不知道是否可以扩展到多行。对于第一行，前缀为星号*，对于后面的行，前缀为管道| 以下是我努力实现的目标：Html 使用CSS为每一行添加前缀字符,html,css,css-selectors,Html,Css,Css Selectors,我正在寻找一种只使用CSS为每行文本添加前缀的方法。当前前缀是：before selector，但我不知道是否可以扩展到多行。对于第一行，前缀为星号*，对于后面的行，前缀为管道| 以下是我努力实现的目标： * Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo | enim propriae eu, denique molestie definiebas mel no. Solum int
* 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唯一的解决方案？您可以使用渐变直观地解决这个问题。诀窍是考虑线的高度，以便正确地重复每一行的图案，然后简单地调整不同的值来控制线的大小并接近于。 .盒子{ 左侧填充：20px； 字体大小：25px； 线条高度：1.2em；/*这用于渐变，因此应该匹配*/ 背景： 向底部重复线性渐变， 透明0px，透明5px， 000 5px，000 calc1.2em-2px， 透明calc1.2em-2px，透明1.2em 4×0/2×100% 不重复； } |Lorem ipsum dolor sit amet，与Lorem | Proin pharetra felis eu arcu imperdiet，ac ultricies velit scelerisque合作。法雷特拉显贵酒店。多内克在托尔托尔在萨皮安在埃吉特·里苏斯在普雷蒂姆。将元素从累积元素中分离出来。马勒苏阿利夸。维瓦摩斯·ac·马蒂斯·萨皮恩，维塔·英特杜姆·洛雷姆。虎口浮雕和肘部浮雕同侧前庭；
您可以使用“渐变”在视觉上实现这一点。诀窍是考虑线的高度，以便正确地重复每一行的图案，然后简单地调整不同的值来控制线的大小并接近于。 .盒子{ 左侧填充：20px； 字体大小：25px； 线条高度：1.2em；/*这用于渐变，因此应该匹配*/ 背景： 向底部重复线性渐变， 透明0px，透明5px， 000 5px，000 calc1.2em-2px， 透明calc1.2em-2px，透明1.2em 4×0/2×100% 不重复； } |Lorem ipsum dolor sit amet，与Lorem | Proin pharetra felis eu arcu imperdiet，ac ultricies velit scelerisque合作。法雷特拉显贵酒店。多内克在托尔托尔在萨皮安在埃吉特·里苏斯在普雷蒂姆。将元素从累积元素中分离出来。马勒苏阿利夸。维瓦摩斯·ac·马蒂斯·萨皮恩，维塔·英特杜姆·洛雷姆。虎口浮雕和肘部浮雕同侧前庭；
除非有数十万行，否则可以使用内容为|\a |和\a换行符的伪元素，只要尽可能多地添加大量行即可 p{ 位置：相对位置； 左：1米； 溢出：隐藏； 宽度：100px； } p:以前{ 内容：*； 位置：绝对位置； 左：0； 排名：0； } p:之后{ 内容：|\a |\a |\a |\a |\a |\a |\a |\a |\a | \a | \a | \a | \a | \a | \a | \a |\a |\a |\a； 空白：预处理； 位置：绝对位置； 左：0； 顶部：1米； }
两位劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳。Eu eum illud.除非有数十万行，否则可以使用内容为|\a |和\a换行符的伪元素，只需尽可能多地添加大量行即可 p{ 位置：相对位置； 左：1米； 溢出：隐藏； 宽度：100px； } p:以前{ 内容：*； 位置：绝对位置； 左：0； 排名：0； } p:之后{ 内容：|\a |\a |\a |\a |\a |\a |\a |\a |\a | \a | \a | \a | \a | \a | \a | \a |\a |\a |\a； 空白：预处理； 位置：绝对位置； 左：0； 顶部：1米； }
两位劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳德姆·劳。你让我的生活很艰难。现在我想我需要在meta中发布：如何接受多个答案？说真的，我会接受@Stickers答案，因为我在原始问题中指定了管道字符。但我肯定会用你的，因为它的规模更好，重复的解决方案是经过深思熟虑的，避免了重复管道的有限解。你让我的生活很困难。现在我想我需要在meta中发布：如何接受多个答案？说真的，我会接受@Stickers答案，因为我在原始问题中指定了管道字符。但我肯定会使用你的，因为它的规模更好，重复的解决方案是经过深思熟虑，避免了重复管道的有限解。