在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> 

見該文章也是如此。