Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre CSS» Pseudo-éléments

Sommaire
  1. Les pseudo-éléments CSS c'est quoi ?
  2. ::before et ::after
  3. ::backdrop
  4. ::first-letter
  5. ::first-line
  6. ::placeholder
  7. ::selection
Télécharger ce cours en pdf

👉 Les pseudo-éléments CSS c'est quoi ?

Contrairement à la pseudo-classe qui cible un élément existant réellement dans le document, le pseudo-élément permet, quant à lui, de cibler des éléments indépendants du DOM.

  • ::after : permet de générer du contenu via la propriété content. Celui-ci n'est donc n'est pas intégré directement au DOM, cependant il apparaît bien sur la page.
  • ::backdrop : il s'agit d'une boîte que l'élément en plein écran affiche derrière lui, mais en même temps il se trouve au-dessus de tout autre contenu.
  • ::before : fonctionne exactement de la même manière que le pseud-élément ::after, mais en insérant le contenu avant tout autre contenu dans le document.
  • ::cue : (stade de projet) permet de modifier les sous-titres (format WebVTT) d'une vidéo.
  • ::first-letter : sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
  • ::first-line : permet de cibler la première ligne d'un élément (comme un paragraphe par exemple).
  • ::marker : (aucun support) c'est le marqueur d'un élément d'une liste. Ce pseudo-élément permet donc de styliser la puce ou le numéro d'une liste.
  • ::placeholder : représente le texte de substitution pour un élément de formulaire. Cela permet de personnaliser l'apparence de ce texte.
  • ::selection : permet de mettre en forme la sélection d'éléments dans le document, choisis par l'utilisateur via la souris ou un autre dispositif de pointage.

👉 Exemples :

Exemple avec les pseudo-éléments ::before et ::after (ils sont souvent utilisés ensemble, mais peuvent l'être bien entendu séparément) :

Exemple avec les pseudo-éléments


.class:before{

content: '✔️'

}

.class:after{

content: '❌'

}


Vous pouvez aussi insérer du texte :

Exemple avec les pseudo-éléments


<div>Je suis </div>




div:after{

color: #7A5FFF;
content: '< développeur />'

}


Toutefois, gardez bien en tête que vous ne pouvez pas sélectionner le contenu de ces pseudo-classes.

💡 NB : concernant les pseudo-éléments ::after et ::before, ils peuvent aussi s'écrirent avec un seul double-point (dans la spécification CSS niveau 2).


Exemple avec ::backdrop (Compatibilité très pauvre) :

Voir démonstration

Pour une compatibilité plus étendue, vous devrez utiliser un polyfill.



<button id="ouverture-dialog">cliquez ici</button>

<dialog id="demo-dialog">  
<h3></h3>
<p></p>
<button id=fermer>×</button>
</dialog> 



dialog,
button{
	
border: 0
		
}
	
dialog {
	
padding: 0;
border-radius: .5rem;
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.31)
	
	}

dialog::-webkit-backdrop {
	
	background-color: hsla(0, 0%, 0%, 0.4)
	
	}
	
dialog::backdrop {
	
	background-color: hsla(0, 0%, 0%, 0.4)
	
	}

	
	
/* polyfill */
dialog + .backdrop {
	
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: hsla(0, 0%, 0%, 0.4)
	
}
	
	
/* anciens navigateurs */
	
dialog {
	
display: none;
position: absolute;
margin: 0 auto;
max-width: 80%
	
}
	
/* anciens navigateurs */
	
	
dialog[open] {
	
display: block;
min-width:50%;
min-height:50%;
animation: anim-dialog .4s ease-out
	
	}


dialog h3 {
	
display: flex;
justify-content: center;
font-size: 2rem;
padding: 1rem;
margin: 0;
color: white;
background: var(--gd-linear);
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;

}

dialog p{
	
	text-align: center
	
	}



dialog button {
	
color: white;
background: none;
position: absolute;
top: .2rem;
right: .2rem;
padding: .25rem .5rem;
line-height: 1;
font-size: 2rem
	
}

@keyframes anim-dialog {
	
	from{
		
		opacity: 0;
		transform: scale(0)}
	
	to{
		opacity: 1;
		transform: scale(1)
	}
	
	}	



// Polyfill
<script src='https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.js'></script> 

let boite = document.getElementById('demo-dialog');
let ouverture = document.getElementById('ouverture-dialog');
let fermeture = document.getElementById('fermer');
dialogPolyfill.registerDialog(boite);
ouverture.addEventListener('click', function () {
  boite.showModal();
});
fermeture.addEventListener('click', function () {
  boite.close('cancelled');
});


boite.addEventListener('click', function (event) {
  if (event.target === boite) {
    boite.close('cancelled');
  }
});

Complément d'infos sur le pseudo-élément ::backdrop.


Exemple avec ::first-letter

Exemple avec les pseudo-éléments


.class::first-letter{

font-size: 2.5rem;
padding: .25rem .5rem;
margin-right: .25rem;
border: 2px solid;
font-weight: bold;
color: #7A5FFF

}


Exemple avec ::first-line (niveau 3)

Exemple avec les pseudo-éléments


p::first-line{

color: #7A5FFF

}


Exemple avec ::placeholder

Exemple avec les pseudo-éléments

::placeholder{

color: #7A5FFF

}



<input placeholder="Rechercher...">



Exemple avec ::selection

Exemple avec les pseudo-éléments


/*NB : préfixe pour Firefox ::-moz-selection*/

::selection{

background-color:purple;
color: white

}

Article complet sur les pseudo-éléments.