Common CSS Pseudo-Elements

::after

This paragraph ends with an icon using ::after.

p::after {
  content: " ✔";
  color: green;
}

::first-line

This is a long paragraph that shows how the first line looks bold and styled differently from the rest.

p::first-line {
  font-weight: bold;
  color: #2c3e50;
}

::first-letter

This paragraph uses a large first letter for styling effect.

p::first-letter {
  font-size: 2em;
  color: #d35400;
}

::placeholder

input::placeholder {
  color: #999;
  font-style: italic;
}

::selection

Select some of this text to see custom highlight color.

p::selection {
  background: #ffe600;
  color: black;
}

::marker

First item
Second item
Third item

li::marker {
  color: red;
  font-size: 1.2em;
}