Le sélecteur :first-letter ne fonctionne pas pour le lien

Question

Le :first-letter Le sélecteur de pseudo-éléments fonctionne parfaitement pour un <p> mais pas pour les liens. Ceci, par exemple, n'a aucun effet :

a:first-letter
{
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

Pourquoi ? Comment puis-je faire en sorte que le style de la première lettre soit différent pour une <a> élément

Answer 1

Selon la W3 spec , le :first-letter Le pseudo-élément ne fonctionne que pour un élément de bloc, qui a ne l'est pas.

Curieusement, *:first-letter a provoqué la transformation de la première lettre, sous Chrome 14 et Firefox 3.6.23. Fiddle : http://jsfiddle.net/8W7FF/3/

Answer 2

Vérifier le spécification . Dès à présent, inline ne sont pas pris en charge par les ::first-letter :

En CSS, le ::first-letter Le pseudo-élément s'applique aux conteneurs de type bloc tels que block , list-item , table-cell , table-caption et inline-block éléments.
Remarque : une version ultérieure de la présente spécification pourrait permettre à ce pseudo-élément de s'appliquer à d'autres types d'affichage.
https://www.w3.org/TR/selectors-3/#application-in-css

Ainsi, si vous essayez de styliser le ::first-letter d'un élément qui n'est pas un "conteneur de type bloc", comme un élément en ligne, cela ne fonctionnera pas. Cela ne s'applique pas seulement aux liens ; vous constaterez également que, par défaut, vous ne pouvez pas styliser l'élément ::first-letter d'un span soit, comme indiqué ci-dessous :

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>

Une solution possible consiste à transformer l'élément en un bloc conteneur en lui attribuant, par exemple, la valeur suivante display: block o display: inline-block . Voici un exemple, utilisant le premier pour le span et le dernier pour le a :

div::first-letter, span::first-letter, a::first-letter {
    font-size:200%;
    text-transform:uppercase;
    color:#8A2BE2;
}
span {
    display: block;
}
a {
    display: inline-block;
}

<div>I'm a div</div>
<span>I'm a span</span>
<a href="https://google.com">I'm an anchor</a>