Pourquoi CSS `:before` ne fonctionne-t-il pas sur les éléments SVG en ligne ?

CSS :avant sur Inline SVG

Introduction

Le style des éléments SVG en ligne à l'aide des pseudo-éléments :before et :after est une tâche courante dans le Web développement. Cependant, il est important de comprendre les limitations imposées aux éléments remplacés, qui incluent SVG.

Le problème

Dans l'exemple de code donné, le style :before appliqué à l'élément SVG n'est pas reflété, indiquant que le contenu généré pourrait ne pas être applicable au SVG.

Éléments remplacés et contenu généré

Le SVG en ligne est considéré comme un élément remplacé, ce qui signifie qu'il est ne fait pas partie du flux de contenu mais remplace l'élément parent. Le contenu généré, quant à lui, est un contenu inséré dans l'arborescence du document à l'aide de pseudo-éléments comme :before et :after.

Spécifications CSS

Les spécifications du contenu généré en CSS sont définies dans le "Module de contenu généré et remplacé CSS3." Selon ce document, le contenu généré n'est pas autorisé à l'intérieur des éléments remplacés. Ceci explique l'échec du style :before sur le SVG dans l'exemple.

Une solution possible : le pseudo-élément :outside

Bien que le contenu généré ne soit pas pris en charge dans les éléments remplacés, le document W3C cité suggère une solution : le pseudo-élément :outside. Ce pseudo-élément place le contenu généré en dehors de l'élément remplacé, contournant ainsi la restriction. Malheureusement, la prise en charge de :outside est actuellement limitée.

Conclusion

Le style SVG en ligne à l'aide de :before ou :after n'est pas possible en raison des limitations imposées sur les éléments remplacés. Pour résoudre ce problème, explorez des méthodes alternatives telles que l'utilisation de classes ou d'attributs pour ajouter dynamiquement des éléments avec le style souhaité.

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!