:first-letter
does not work on inline elements such as a span
.
others inline elements are:
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
:first-letter
works on block elements such as a paragraph, table caption, table cell, list item, or those with the inline-block
property applied.
if you want a :first-letter
selector in a span
then write it like this:
p span:first-letter {font-size: 500px !important;}
span {display:block}
<p>
<span>text here</span>
</p>