CSS pseudo elementen - nadia2603/stage-maykin GitHub Wiki

Voegt iets toe vóór de inhoud van een element.

p::before {
  content: "👉 ";
}

<p>Hallo</p>

Resultaat: 👉 Hallo

Voegt iets toe ná de inhoud van een element.

p::after {
  content: " ✔";
}

<p>Hallo</p>

Resultaat: Hallo ✔

Styled alleen de eerste letter.

p::first-letter {
  font-style: italic;
}

<p>hello world</p>

Resultaat: **h**ello world (zonder de ***)

Styled alleen de eerste regel.

p::first-line {
  font-weight: bold;
}

Wat je met je muis selecteert wordt anders gestyled

p::selection {
  background: yellow;
  color: black;
}

Stylet de tekst in inputvelden

input::placeholder {
  color: gray;
}

Stylet de bullets (•) en nummers (1., 2., 3.)

li::marker {
  color: red;
  font-size: 1.2em;
}

<ul>
  <li>Item 1</li>
</ul>

Stylet de knop van: [ Choose file ]

input::file-selector-button {
  background: blue;
  color: white;
}

Stylet de popup.

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

Stylet de ondertitels in de video (<video> + captions).

::cue {
  color: yellow;
}