Designen met pseudo elementen
@Work1
Pseudo-elementen
Designen met Pseudo-elementen
Pseudo-elementen
- Met de ::before en ::after pseudo selectoren kan je nieuwe (pseudo) elementen toevoegen.
li::after {
content: '-';
}Pseudo-elementen
Je kan hier ofwel tekst in plaatsen ofwel dit leeg laten. Maar dit zal enkel maar op je pagina verschijnen als je de content-property definieert!
li::after {
content: none; /* default - Genereert het element niet */
content: ''; /* Genereert wel het element */
content: '-'; /* Genereert wel het element */
}Pseudo-elementen
De inhoud (content) die via CSS ingevoerd wordt zal niet leesbaar zijn voor schermlezers, want deze content zal niet in de HTML te lezen zijn!
li::after {
/* Doe dit niet! */
content: '*Dit is een verplicht veld van het formulier'; /* Genereert wel het element */
}Pseudo-elementen
li::after {
content: '-';
color: red;
margin: 0 0.5rem;
}
li:last-child::after {
content: '';
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
In de inspector
Pseudo-elementen kan je ook terugvinden in de inspector!
Speelruimte in design
Designen met Pseudo-elementen
Als visueel element
- Met content:''" en display: block; kan je het als een visueel element gebruiken, bv. een border, ...
Voorbeeld: custom border
li {
padding: 0.25rem 0.5rem;
list-style-type: none;
}
li::after {
display: block;
content: '';
width: 100%;
height: 4px;
background: #aaa;
}
Voorbeeld: custom border
Voorbeeld: Tooltip
Meer voorbeelden?
Als visueel element
Het gebruik van pseudo-selectoren vervangt het gebruik van lege <div> en <span> elementen die toegevoegd zijn geweest puur om design-gewijs iets gedaan te krijgen.