在CSS中，我不知道如何在“第一行”或“第一字母”中添加“内容”

Question

ul.myList {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;


&:first-line {
  color: $blue;
  text-align: left;
  font-size: 100%
}

我使用“第一行”将第一行的颜色设置为蓝色。 我想做的就是添加内容。 我尝试通过使用

content: "+";

我也尝试过使用li和first-letter 。 但是，使用first-letter会将“ +”复制到列表的所有元素。 所以我的界面看起来像这样：

+ parent
  + child
  + child

我只是想要这个：

+ parent (blue color)
child
child
child

有人能帮我吗 ？

Answer 1

您不能仅将content属性与任何content一起使用（转到此处 ），而必须将其与::before或::after伪元素一起使用； 在您的情况下为::before （显然是因为您想在文本之前而不是在文本后面插入“ +”）。

这是您的操作方式：

 p::first-line { color: blue; text-align: left; font-size: 100% } p::before { content: "+"; } 

 <p> My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. My name is Jon Snow and I know nothing. </p> <br> <p> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 

见该文章也是如此。