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.

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

.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.