Pseudo-elements

Pseudo-elements

Pseudo-elements create styleable VIRTUAL PARTS of an element (with ::).

::before and ::after

Insert generated content before/after the element. ALWAYS need content:

.note::before {
  content: "★ ";
  color: gold;
}
.note::after {
  content: " ★";
}

They become decorative inner-layers (absolute-positionable overlays!).

::first-line & ::first-letter

p::first-line { text-transform: uppercase; }
p::first-letter { font-size: 3em; float: left; }

::selection

Style text when users highlight it:

::selection {
  background: #ffc;
}

::marker and ::placeholder

li::marker { color: violet; }          /* the bullet */
input::placeholder { color: gray; }    /* hint text */

Keep content safe

content can only be used on ::before/::after.

TL;DR

• :: before/after generate decorative content.
• ::first-line/::first-letter` style text sections.
• ::selection, ::marker, ::placeholder.
• before/after need a content value.
• Great for icons, badges, and shapes.