Comment puis-je ajouter des sauts de ligne au contenu des pseudo-éléments à l'aide des attributs de données en CSS ?

Attribution de caractères de nouvelle ligne aux attributs de données dans CSS et au contenu de pseudo-éléments

Cette requête explore la possibilité d'incorporer des caractères de nouvelle ligne dans CSS attributs de données. L'utilisateur vise à afficher un contenu multiligne en utilisant la propriété content d'un pseudo-élément et la valeur extraite de l'attribut data.

Mise en œuvre

L'approche initiale, l'utilisation de "a" comme caractère de nouvelle ligne dans l'attribut de données s'est avérée infructueuse. Pour obtenir le résultat souhaité, les modifications suivantes sont nécessaires :

Modification des attributs de données :

• Remplacer "a" par " "; cette entité HTML correspond à un caractère de saut de ligne.

Modifications CSS :

• contenu : attr(data-foo) ;: Conservez la fonctionnalité d'origine d'affichage du contenu de l'attribut de données.
• background-color: black; white-space: pre; display: inline-block;: Assurez-vous que le le contenu conserve sa mise en forme et s'affiche sous forme de bloc discret.

Code final :

CSS :

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

HTML :

<div data-foo='First line 
 Second Line'>foo</div>

Cette modification permet au pseudo-élément d'afficher le contenu multiligne, en préservant les sauts de ligne tels que définis dans l'attribut data.

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!