如何使用CSS在每行之前插入内容

Question

我有一个HTML文档，看起来像下面这样，并且只使用CSS，我想在每行之前插入一个星号。对于第一行，如下所示:

p:before {
content: "*";
}

<p>
test
<br> test2
<br> test3
</p>

但是我不知道如何在每一行之前添加星号。我试过:

p:before {
content: "*";
}
p>br:after {
content: "*";
}

<p>
test
<br> test2
<br> test3
</p>

但它似乎不工作。

我怎样才能做到这一点?

codepen: https://codepen.io/ds241/pen/QWQyPKY

Answer 1

因此，您使用类quote选择此div，提取其innerHTML，并使用toString()方法将其转换为字符串。然后使用<br>分隔符拆分该字符串，从而得到一个数组。然后将该数组映射为在每个新行字开始前包含一个*。

最后，使用相同的<br>分隔符将这个数组连接在一起，并将quote的innerHTML设置为this。代码最终看起来像这样:

const quote = document.querySelector(".quote");
let innerHTML = quote.innerHTML;
const t = innerHTML.toString();
let s = t.split("<br>");
s = s.map((i) => {
return `*${i}`;
});
s = s.join("<br>");
quote.innerHTML = s;

Answer 2

使用Unicode进行换行的两种方法

首先分配以下CSS:

图我

p {
white-space: pre;
}

以上内容适用于这两种技术。第一种方法是在HTML中使用
。

图2

<p>test1&#10;test2&#10;test3&#10;</p>

第二种方法是使用::before、content和0000a。

图3

p::before {
content: "0002a test10000a 0002a test20000a 0002a test30000a";
}

p {
white-space: pre
}
.a::before {
content: "0002a test10000a 0002a test20000a 0002a test30000a";
}

<p class='a'></p>
<p>
*test4&#10;*test5&#10;*test6&#10;
</p>

Answer 3

这是因为所有的内容都在一个元素中。使用伪选择器，你只能瞄准元素，而不是它的内容。

let p = document.querySelector('p');
let res = document.querySelector('.res');
res.innerText = p.innerText;

<p>
test
<br> test2
<br> test3
</p>
<div class="res"></div>

Answer 4

您需要对每一行文本进行换行。根据您的实现方式，您可以通过多种方式实现这一点。您可以将它们包装在单独的

标签或标签中，或者如果它是一个列表，请考虑和

标签。这将允许你将CSS应用到每一行。

p:before {
content: "*";
}
p>br:after {
content: "*";
}

<p>test</p>
<p>test2</p>
<p>test3</p>

Answer 5

你少了一个':'

那么这个p的css应该是这样的:

p::before {
content: "*";
}
p:before {
content: "*";
}