CSS => Pseudo-Elementen

Invoering

Pseudo-elementen, net als pseudo-klassen, worden toegevoegd aan een CSS-selector, maar in plaats van een speciale status te beschrijven, kunt u bepaalde delen van een html-element bestrijken en opmaken.

Het :: pseudo-element van de eerste letter richt zich bijvoorbeeld alleen op de eerste letter van een blokelement dat door de selector is opgegeven.

Syntaxis

selector :: pseudo-element {eigenschap: waarde}

parameters

pseudo-element	Beschrijving
`::after`	Voeg inhoud in na de inhoud van een element
`::before`	Voeg inhoud in vóór de inhoud van een element
`::first-letter`	Selecteert de eerste letter van elk element
`::first-line`	Selecteert de eerste regel van elk element
`::selection`	Komt overeen met het gedeelte van een element dat door een gebruiker is geselecteerd
`::backdrop`	Wordt gebruikt om een achtergrond te maken die het onderliggende document verbergt voor een element in de stapel van de bovenste laag
`::placeholder`	Hiermee kunt u de plaatsaanduidingstekst van een formulierelement opmaken (experimenteel)
`::marker`	Voor het toepassen van lijststijlattributen op een bepaald element (experimenteel)
`::spelling-error`	Vertegenwoordigt een tekstsegment dat door de browser is gemarkeerd als onjuist gespeld (experimenteel)
`::grammar-error`	Vertegenwoordigt een tekstsegment dat door de browser is gemarkeerd als grammaticaal onjuist (experimenteel)

Opmerkingen

Soms zul je twee opeenvolgende dubbele punten (zie :: ) in plaats van slechts één ( : ). Dit is een manier om de pseudo-classes van pseudo-elementen afzonderlijk, maar sommige oudere browsers zoals Internet Explorer 8 ondersteunt alleen enkele dubbele punt ( : ) voor de pseudo-elementen.
Men kan slechts één pseudo-element in een selector gebruiken. Het moet achter de eenvoudige selectors in de instructie verschijnen.
Pseudo-elementen maken geen deel uit van de DOM en kunnen daarom niet worden aangesproken door :hover of andere gebruikersevents.

Pseudo-Elementen

Pseudo-elementen worden toegevoegd aan selectors, maar in plaats van een speciale status te beschrijven, kunt u bepaalde delen van een document opmaken.

Het content attribuut is vereist om pseudo-elementen te kunnen weergeven; het kenmerk kan echter een lege waarde hebben (bijvoorbeeld content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudo-elementen in lijsten

Pseudo-elementen worden vaak gebruikt om het uiterlijk van lijsten te wijzigen (meestal voor ongeordende lijsten, ul ).

De eerste stap is het verwijderen van de standaardlijstkogels:

ul {
  list-style-type: none;
}

Vervolgens voegt u de aangepaste stijl toe. In dit voorbeeld maken we verloopvakken voor opsommingstekens.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Resultaat

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Pseudo-Elementen

Zoeken…