:first-letter not working with strong

css, html

Solution

Further to other answers, it also (in Chromium at least) works with elements with `display: inline-block`, so the `display` simply has to be anything other than `inline` (including `list-item`), for example:

strong {
    font-weight: bold;
    color: blue;
    display: inline-block;
}
strong::first-letter {
    color: red;
}

JS Fiddle demo.

Also, `::first-letter` is a pseudo-element, so the syntax should be double-colon rather than single, in order to distinguish the selector from a pseudo-class.

Problem

I give up. Why is :first-letter not working here? ``` strong { font-weight: bold; color: blue; } strong:first-letter { color: red; } <strong>test test</strong> ```

Original source