×

css · level 2 · unit 6 · lesson 4

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

::before and ::after add extra bits with CSS alone.

A is a part of an element that CSS can style as if it were an element of its own. You write it with two colons. ::before adds a box at the start of the element's , and ::after at the end.

They only appear once you give them the content property, usually text in quotes: content: "Tip: ";. An empty content: "" makes a box you can colour and size.

Use them for decoration only. Some tools that read pages aloud skip them, so never put important words there.

<p class="tip">Water your plants in the morning.</p>
.tip::before {
  content: "Tip: ";
  font-weight: bold;
}
.tip {
  padding: 12px;
  background-color: lightyellow;
}

Press show my page to see it here.

The words Tip: appear on the page, but they live in the CSS, not the HTML.