Understanding CSS Pseudo‑Classes and Pseudo‑Elements with Practical Examples

Pseudo‑Classes and Pseudo‑Elements

First we need to clarify two concepts: pseudo‑classes and pseudo‑elements. Many developers initially think they refer to the same thing, such as ::before and ::after , but they actually represent distinct features.

Pseudo‑Classes

According to w3cSchool, a pseudo‑class defines a special state of an element. Common examples include :link , :hover , :active , and :first-child . There are many more pseudo‑classes; refer to the official documentation for a complete list.

Pseudo‑Elements

A pseudo‑element styles a specific part of an element. The five standard pseudo‑elements are ::before , ::after , ::first-letter , ::first-line , and ::selection .

Pseudo‑classes and pseudo‑elements can be combined, e.g., .sbu-btn:hover::before . The examples later in this article use this technique.

::first-letter is mainly used to apply special styling to the first letter of a block of text.

Note: ::first-letter only works on block‑level elements.

::first-line applies special styling to the first line of a block of text.

Note: ::first-line only works on block‑level elements.

::selection matches the portion of an element selected by the user, allowing properties such as color , background , cursor , and outline to be styled.

color

background

cursor

outline

The article focuses on ::before and ::after , which are frequently used in everyday development.

Usage and Examples

::before inserts content before an element, while ::after inserts content after an element. To use them, simply add the selector with double colons after the element selector, e.g., .class1::before or .class1::after . The double‑colon syntax is the CSS3 standard that distinguishes pseudo‑elements from pseudo‑classes.

Both ::before and ::after require the content property; without it, the pseudo‑element will not render.

Adding Content Before an Element

This is the most basic usage. For example, you can prepend custom text to selected elements.

<div class="class1">
<p class="q">
你的名字是？
</p>
<p class="a">
张三
</p>
<p class="q">
你的名字是？
</p>
<p class="a">
张三
</p>
</div>

.class1::before {
  content: '问卷';
  font-size: 30px;
}

.class1 .q::before {
  content: '问题：';
}

.class1 .a::before {
  content: '回答：';
}

You can also turn the pseudo‑element into a block‑level element to display shapes.

.news-item::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: rgb(96,228,255);
  margin-right: 8px;
  border-radius: 50%;
}

Images can be added via content: url(...) , though resizing requires using a background image instead.

.class3 .text1::before {
  content: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg);
}

Clearing Floats with Pseudo‑Elements

Instead of inserting empty elements with clear:both , you can attach clear:both to a pseudo‑element, keeping the markup cleaner.

Disabling Ctrl+F Search

By rendering text with ::before and ::after , the generated characters become unselectable and therefore cannot be found with the browser’s search function (supported in Chrome and Safari).

Special Hover/Leave Button Effect

The following example creates a button whose background color changes on hover using pseudo‑elements. The effect is achieved by animating the width of two pseudo‑elements positioned on the left and right.

.h-button {
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.h-button::before,
.h-button::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  filter: brightness(.9);
  background-color: inherit;
  z-index: -1;
}

.h-button::before { left: 0; }
.h-button::after { right: 0; transition: width .5s ease; }

.h-button:hover::before { width: 100%; transition: width .5s ease; }
.h-button:hover::after { width: 100%; background-color: transparent; }

The principle is simple: two pseudo‑elements cover the button, one expands from left to right on hover, while the other contracts from right to left when the mouse leaves, creating a smooth color‑shift effect.

These creative uses of pseudo‑elements are just a few examples; feel free to experiment and share your own techniques.