CSS not changing color of first two charactor

Question

HTML

<p class="required">*Required</p>

CSS

<style>
.required::first-letter {
 font-size: 200%;
 color: #8A2BE2;
}
</style>

This css not changing color of '*' only,It changes both '*R'.Why?

.required::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}

<p class="required">*Required</p>

Answer 1

The ::first-letter selector is used to add a style to the first letter of the specified selector.* is a symbol.

You can use ::before

.required::before {
    content: '*';
    font-size: 200%;
    color: #8A2BE2;
}

<p class="required">Required</p>

Answer 2

If you look at the spec in http://www.w3.org/TR/css3-selectors/#first-letter, it says:

Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included. [UNICODE]

So the asterisk should be included (is in the "other" (Po) punctuation class of unicode) as for the spec. That's why it is included in your css.