CSS : avant et : après les pseudo-éléments peuvent-ils styler le SVG en ligne ?

Style du SVG en ligne à l'aide de CSS : avant et après les pseudo-éléments

Introduction

Les pseudo-éléments CSS :before et :after sont couramment utilisés pour améliorer les éléments HTML avec un contenu décoratif ou fonctionnel. Cependant, lorsqu’il s’agit d’éléments SVG en ligne, l’application de ces pseudo-éléments peut rencontrer des difficultés. Cet article explore pourquoi cela représente un défi et propose une solution potentielle.

SVG en tant que contenu remplacé

Les éléments SVG en ligne sont considérés comme du contenu remplacé, ce qui signifie qu'ils remplacent le contenu original du élément auquel ils font référence. Ce comportement est inhérent à tous les éléments de type image, y compris SVG. Par conséquent, le contenu généré, tel que celui créé par :before et :after, n'est pas autorisé dans les éléments remplacés.

Pourquoi :before et :after Échec avec SVG

La documentation MDN indique que les éléments créés à l'aide de :before et :after sont des "éléments remplacés anonymement". Étant donné que le contenu remplacé ne peut pas contenir de contenu généré, cela explique pourquoi l'application de :before et :after au SVG en ligne est inefficace.

Solution potentielle - :en dehors du pseudo-élément

Un Une solution intéressante est suggérée dans un projet de document CSS intitulé "Module de contenu généré et remplacé CSS3". Ce document introduit un nouveau pseudo-élément, :outside, qui place le contenu généré en dehors de l'élément remplacé. En utilisant :outside, il peut être possible de surmonter les limitations de :before et :after lorsqu'ils sont utilisés avec SVG en ligne.

Conclusion

Lors de l'utilisation de CSS : Les pseudo-éléments before et :after sur SVG en ligne ne sont généralement pas pris en charge, le pseudo-élément :outside offre une solution potentielle pour placer le contenu généré à côté des éléments SVG. Les développeurs doivent être conscients des différences entre les éléments en ligne et remplacés lors de la conception de leurs styles CSS.

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!