Advanced Selectors

CSS Pseudo-elements

Style parts of an element: ::before, ::after, ::first-line.

1Virtual Elements

Insert content without HTML.

Example Code

css

.quote::before {
  content: '"';
  font-size: 20px;
}
p::first-line {
  font-weight: bold;
}

2Understand it in a real interface

Pseudo-elements style a particular part of an element or add a generated decorative box. They are useful for small accents and separators, but important information should remain in real HTML. Generated content can be difficult to interact with and is not a replacement for semantic structure.

3Try it yourself

Add a decorative before accent to a section heading. Remove its content declaration and observe why the generated box disappears. Keep the heading’s real text in the markup, then check that the decoration does not overlap it at small widths.

Finished reading?

Mark this topic as complete to track progress.

CSS Pseudo-classes

Next Topic

CSS Attr Selectors