in CSS, I can't figure out how to add “content” to “first-line” or “first-letter”

Question

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


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

I used "first-line" to make the color of the first line blue. What I want to do is to add content. I tried this by using

content: "+";

I also tried using a li before, and by using first-letter . However using first-letter , replicates the "+" to all the elements of the list. So my interface would look like this:

+ parent
  + child
  + child

I simply want this:

+ parent (blue color)
child
child
child

Can someone help me ?

Answer 1

You can't use the content property with just anything (go here ), you have to use it with either the ::before or the ::after pseudo-element; in your case, ::before (Obviously, because you want to insert the "+" before the text, not after it).

Here is how you do it:

 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> 

See this article as well.