Pseudo classes et pseudo éléments en CSS : après

Cet article présente principalement la pseudo-classe et le pseudo-élément :after en CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Il existe des attributs spéciaux en CSS, appelés pseudo-classes. Les plus couramment utilisés sont les pseudo-liens : link, :visited, :hover, :active, etc. Cet article présente l'utilisation d'after en détail. Les amis intéressés peuvent en prendre connaissance, cela peut vous être utile

Il existe des attributs spéciaux en CSS, appelés pseudo-classes. Le plus couramment utilisé d'entre eux est de définir des liens. . Pseudo:lien, :visité, :hover, :actif, etc.
En plus d'eux, il existe également des pseudo-classes qui ne sont pas couramment utilisées, notamment :focus, :first-child, :lang, etc.

Et il n'y a pas que des pseudo-classes en CSS, mais aussi des pseudo-éléments, tels que : :first-letter, :first-line, :before et :after.
Les autres pseudo-éléments de cet article ne seront pas listés pour le moment, parlons juste de : après pseudo-élément.
Après, comme son nom l'indique, signifie après l'élément. L'essence est d'ajouter du contenu après l'élément.
Ce pseudo-élément permet aux producteurs d'insérer le contenu généré à la fin du contenu de l'élément. Il doit être utilisé avec l'attribut content pour définir le contenu qui apparaît après l'objet. Par défaut, ce pseudo-élément est en ligne, mais cela peut être modifié à l'aide de l'attribut display.
Tous les principaux navigateurs prennent en charge le pseudo-élément :after, mais pour IE, il n'est pris en charge que par IE8 et versions ultérieures.

Par exemple, insérez dans le code CSS :

Le code est le suivant :

<style type="text/css"> 
h1:after {content:url(logo.gif)} 
</style> <h1>标题内容</h1>

Lors de son affichage, une image sera insérée après le contenu du titre. C'est ce que fait le pseudo-élément :after. :Le contenu de la pseudo-classe after peut également être suivi d'autres paramètres,

1 : String

Par exemple :

<style type="text/css"> 
.test:after{content:"测试代码"}; 
</style> 
<p class="test">测试p：</p>
运行结果显示为：
测试p：测试代码

Le code est le suivant :

<style type="text/css"> 
.test:after{content:attr(id)}; 
</style> 
<p class="test" id="aaa">测试p的id为：</p>运行结果显示为：测试p的id为：aaa

2 : attr(x)

, attr signifie attribut. le nom l'indique, il s'agit de lire les Par exemple, les attributs des nœuds de classe : Le code est le suivant :



3 : Paramètres fixes

close-quote : Insérez le post-mark de l'attribut quotes

no-close-quote : N'insérez pas la balise après l'attribut quotes. Mais augmentez son niveau d'imbrication

open-quote : Insérez la balise avant l'attribut quotes no-open-quote : N'insérez pas la balise avant l'attribut quotes. Mais réduisez son niveau d'imbrication

Recommandations associées :

Propriétés héréditaires en 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!