Pseudo-elements

All in one: every pseudo-element, side by side

What this example compares

One colon or two: :hover (a state) vs ::first-line (a part) vs ::before (added content) vs the old spelling :before
::before vs ::after: the same word in front or at the end, a rule with no content (nothing appears), content: "" as a dot, and inherited colour and font
What content can hold: "text" vs "" vs "\2713" vs attr(data-label) vs url(...)
Width and height: ignored while inline, then display: inline-block vs display: block vs position: absolute (the gradient underline)
No inside: img::after, input::after, br::after show nothing; a wrapper span::after works
Small marks: the required asterisk, the arrow after a link, the tick, the decorative quote mark
Real parts: ::first-letter vs ::first-line vs ::placeholder vs ::selection
Bullets: the default vs li::marker vs list-style: none + li::before
Decoration or meaning: a price, an error and a button label in content vs the same words in the HTML
Project step 12: the course cards with the Featured ribbon, the tick and the link arrow

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see ten panels (scroll inside the result to reach them all). In panel 1 the first box turns cream only under the mouse, the second has a bold orange first line, and the third and fourth start with a red NEW and a purple OLD. In panel 2 the first box shows only "Lab 3 notes", the next two add a red New in front and at the end, then come a green dot and a blue italic "Tip:". Panel 3 shows "Note:", an orange bar, a green tick, a yellow CSE326 badge and a small campus picture. Panel 4 shows no bar in the first box and a gradient bar after, below and under "Skills" in the other three. Panel 5 adds nothing to the picture, the typing box or the line break, but the wrapped picture gets the caption "Our campus". Panel 6 shows a red star after Full name only, an arrow after the link, a tick and a big pale quote mark. Panel 7 shows a drop cap, a green first line, an orange italic hint and an orange highlight when you select the first sentence. Panel 8 shows black, green, orange and triangle bullets. In panel 9 the top row ("Not fine") looks just like the bottom row ("Right"), and panel 10 shows two course cards, the first with an orange Featured ribbon on its top edge and an arrow after its link, the second with a green tick. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 4 all four boxes share the same content: "", width and height. Why does the first box show no bar at all?

Because a ::after is an inline box by default, and inline boxes ignore width and height. An empty inline box has no size, so nothing is drawn. Giving it display: inline-block, display: block or position: absolute (the other three boxes) makes the size count.