Skip to content
Laviyx Learn

Try

CSS course menu

CSS Pseudo-elements: ::before, ::after, ::first-letter, ::placeholder and ::selection

Learn CSS pseudo-elements with live examples: adding decorative content with ::before and ::after and the content property, styling the first letter and first line, ::placeholder, ::marker for list bullets, and ::selection.

Beginner6 min readUpdated
On this page

A pseudo-element styles a specific part of an element, such as its first letter or the space just before its content, as if it were a separate element. Pseudo-elements use two colons.

::before and ::after#

::before and ::after insert a box at the start or end of an element's content. They only appear if you set the content property:

CSS
.price::before {
  content: "₹";
  color: #888;
}
.new::after {
  content: "NEW";
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  background: crimson;
  color: white;
  border-radius: 4px;
}
HTML
<p class="price">499</p>
<p class="new">Dark mode is here</p>
Result

content is usually a string. It can also be empty (content: ""), which is common for purely decorative shapes:

CSS
.title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 6px;
  background: #2f5fe0;
  border-radius: 2px;
}
HTML
<h2 class="title">Our Courses</h2>
Result

::before and ::after do not work on void elements such as <img> and <input>, because those have no content box to insert into.

::first-letter and ::first-line#

CSS
.story::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  margin-right: 6px;
  color: #8a3b12;
}
.story::first-line {
  font-variant: small-caps;
}
HTML
<p class="story">Once upon a time, in a small village by the river, there lived a potter who made the finest clay lamps in the whole valley. Every evening the lamps glowed in every window.</p>
Result

The "first line" changes as the window is resized, and the style follows it.

::placeholder#

CSS
input::placeholder {
  color: #8a8a8a;
  font-style: italic;
}
HTML
<input placeholder="Search recipes" size="30">
Result

Keep enough contrast so placeholders stay readable.

::marker#

::marker styles the bullet or number of a list item:

CSS
li::marker {
  color: crimson;
  font-weight: bold;
}
HTML
<ol>
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake for 25 minutes</li>
</ol>
Result

Only a few properties work on ::marker, mainly colour, font properties and content.

::selection#

::selection styles text the user has highlighted:

CSS
p::selection {
  background: #ffd34d;
  color: black;
}
HTML
<p>Select some of this text to see the custom highlight colour.</p>
Result

One colon or two?#

Pseudo-classes use one colon (:hover) and pseudo-elements use two (::before). Old CSS used one colon for both, so browsers still accept :before and :after, but write two colons in new code.

Practice#

Practice exercise

Add a check mark "✓ " before every item of a list with the class features, coloured green, and make the bullet of each item disappear by setting list-style: none on the list.

Show solution
CSS
.features { list-style: none; padding-left: 0; }
.features li::before {
  content: "✓ ";
  color: green;
  font-weight: bold;
}
HTML
<ul class="features">
  <li>Free lessons</li>
  <li>Live examples</li>
  <li>Practice exercises</li>
</ul>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Pseudo-classes: :hover, :focus, :nth-child, :not and MoreLearn CSS pseudo-classes with live examples: user action states (:hover, :focus, :focus-visible, :active), link states, form states (:checked, :disabled, :invalid, :user-invalid), structural pseudo-classes (:first-child, :nth-child, :nth-of-type) and :not().Beginner6 min readCSSCSS Attribute Selectors: [attr], [attr=value], ^=, $= and *=Learn CSS attribute selectors with examples: selecting by the presence of an attribute, exact values, values that start with, end with or contain text, words in a list, and case-insensitive matching, with practical uses for links, inputs and data attributes.Beginner3 min readCSSStyling Lists and Links with CSS: list-style, Markers, Link States and Nav MenusLearn to style lists and links in CSS: list-style-type, custom markers, removing bullets, spacing list items, link colours and states, accessible focus styles, and turning a list of links into a navigation bar.Beginner6 min read