010 – Sélectionner la première ligne avec CSS

010 – Sélectionner la première ligne avec CSS

Sais-tu sélectionner uniquement la première ligne d’un paragraphe en CSS ?

Le tout avec la largeur du paragraphe qui peut varier ? 🤔

Aujourd’hui on parle du pseudo élément ::first-line qui permet comme indiqué de sélectionner la première ligne d’un élement.

Le pseudo élément n’est utilisable que sur des éléments blocs (display: block). Dans les autres cas la notion de ligne n’existe pas.

J’ai fais un petit exemple que tu peux voir dans la vidéo ci-dessous (ouais j’ai fais une vidéo..) 🎥

Voici un lien vers le Codepen de la vidéo si l’envie vous prend de vouloir le bidouiller.

https://codepen.io/Craaftx/pen/aea9294f613cbfb1db11de13b1154861/left/

Comme pour les autres publications n’hésites pas à commenter pour donner ton avis ou pour discuter 👇

Haut de page