::first-letter also styles first character

Admin 1
Viewed 158

I have this Text:

p::first-letter {
  color: red;
}
<p>"Welcome!"</p>

but then i realized that also the " got styled.

I tried using ::before but that didn't work either:

p::first-letter {
  color: red;
}

p::before {
  content: '"';
}
<p>Welcome!"</p>

How could I manage to only style the first letter (In clean code)?

css html
4 Answers

simply float the first character and use :after not :before

p::first-letter {
  color: red;
}

p::after {
  content: '"';
  float:left;
}
<p>Welcome!"</p>

user_86203330

Here is what I came up with after trying and thinking a bit of CSS/HTML principles:

I will be using display: inline-block; because ::first-letter requires a block for its content to work.

Please pay attention that I am using <span></span> tag and not <p></p> tag as the HTML W3 Consortium consider it as invalid html code. You can check your code about validity here

Take a look at the sandbox or at the live example here:

.quote span {
  display: inline-block;
}

.quote span::first-letter {
  color: red;
}
<q class="quote" cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921"><span>This is a great quote</span></q>

More info on tags here:

  • see what is <q></q> tag is and how to use it;
  • see more about what is <span></span> (e.g. text wrapper to any text you want to display and style depending on your needs);
  • look through this to see what is the ::first-letter, how it works, and what is needed for it to work properly.
user_69016930

You can text-indent the paragraph and use a before positioned in absolute, but you have to manually set the indent that depends on text-size. It is not a super-clean solution: it is a "not so dirty" one.

p {
  text-indent: 5px;
}
p::first-letter {
  position:relative;
  color: red;
}

p::before {
  position:absolute;
  content: '"';
  left: 0;
}
<p>Welcome"</p>

user_148603570

p::first-letter, it will always style the first character, to style W put a span element like W then style the span.

user_160158890
Related