Les pseudo-éléments CSS `:before` et `:after` peuvent-ils styliser les SVG en ligne ?

Styling du SVG en ligne avec les pseudo-éléments CSS :before et :after : un dilemme

Alors que les pseudo-éléments CSS comme :before et :after sont couramment utilisés pour le style Éléments HTML, leur application sur des SVG en ligne pose un défi unique. Comprendre les nuances des éléments remplacés et du contenu généré est crucial pour résoudre ce problème.

Les SVG en ligne en tant qu'éléments remplacés

Les SVG en ligne sont généralement traités comme des éléments remplacés en HTML. Les éléments remplacés sont ceux qui remplacent le texte par un objet externe, tel qu'une image ou une vidéo. Ils sont affichés comme une seule unité et ne peuvent contenir aucun nœud de texte.

Cette distinction est importante car le contenu généré par CSS, tel que celui créé par les pseudo-éléments :before et :after, ne peut être appliqué qu'aux éléments en ligne. . Les éléments en ligne sont ceux qui suivent le texte environnant et peuvent contenir des nœuds de texte.

Contenu généré et éléments remplacés

Les pseudo-éléments CSS :before et :after créent du contenu généré, qui est inséré dans l'élément correspondant au sélecteur. Cependant, comme les SVG en ligne sont des éléments remplacés, ils ne peuvent pas avoir généré de contenu qui leur est ajouté. En effet, le contenu est ajouté à l'intérieur de l'élément et les éléments remplacés n'autorisent pas le contenu imbriqué.

Approches alternatives

Pour surmonter cette limitation, des approches alternatives peuvent être explorées :

• SVG externe avec pseudo-éléments : Pensez à charger le SVG en tant que fichier externe et à utiliser CSS pour insérer du contenu dans le parent élément à la place.
• Élément Wrapper : Enveloppez le SVG en ligne dans un div contenant et appliquez des pseudo-éléments au wrapper au lieu du SVG lui-même.

W3C Solution proposée : en dehors du pseudo-élément

Dans le document W3C, "CSS3 généré et remplacé Content Module", un pseudo-élément appelé :outside est introduit. :outside permet au contenu généré d'être placé en dehors de l'élément remplacé associé, fournissant potentiellement une solution pour styliser les SVG en ligne. Cependant, il est important de noter que cette fonctionnalité n'a pas été largement implémentée et peut ne pas être prise en charge dans tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!