Pseudo-elements in CSS

Generated boxes before and after content, plus the ones for text and UI.

.tag::before {
  content: "#";
  opacity: 0.6;
}

.required::after {
  content: " *";
  color: #e5484d;
}

::selection {
  background: #7c5cff;
  color: #fff;
}

dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}

How it works

1. content is required for ::before and ::after to render.
2. Decorative generated content should be empty to screen readers.
3. ::placeholder, ::selection and ::backdrop style browser parts.

Keywords and builtins used here

• background
• color
• content
• opacity
• required
• rgb
• tag

The run, in numbers

Lines

18

Characters to type

200

Tokens

57

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 38 seconds.

Type this snippet

Step 1 of 2 in Generated content, step 19 of 21 in Responsive & modern CSS.

← Previous Next →