Usage scenarios of pseudo-element selectors

Basic Concepts of Pseudo-element Selectors

Pseudo-element selectors are a special type of selector in CSS used to target specific parts of an element rather than the element itself. They begin with a double colon ::, although the single colon : syntax is also supported by browsers. However, to distinguish them from pseudo-classes, it is recommended to use the double colon. Pseudo-elements allow developers to add additional styled content to the document without modifying the HTML structure.

/* Basic syntax */
selector::pseudo-element {
  property: value;
}

Adding Decorative Content

Pseudo-elements are often used to add purely decorative content that does not affect the structure or semantics of the HTML document. ::before and ::after are the most commonly used pseudo-elements, inserting generated content before and after the element's content, respectively.

/* Adding an arrow icon to a button */
.button::after {
  content: "→";
  margin-left: 5px;
}

/* Adding quotation marks to a blockquote */
blockquote::before {
  content: open-quote;
  font-size: 2em;
  color: #ccc;
}
blockquote::after {
  content: close-quote;
  font-size: 2em;
  color: #ccc;
}

Clearing Floats

The ::after pseudo-element is often used to create a clearfix solution, a classic method for handling parent element height collapse caused by floated elements.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Styling the First Letter and First Line

The ::first-letter and ::first-line pseudo-elements can apply special styles to the first letter and first line of an element's content, respectively, which is particularly useful in typographic design.

/* Drop-cap effect */
p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

/* Bold first line */
article::first-line {
  font-weight: bold;
  color: #333;
}

Customizing List Markers

The ::marker pseudo-element allows customization of the style of list item markers, which is especially useful for ordered or unordered lists requiring unique styling.

/* Customizing list marker color and size */
li::marker {
  color: red;
  font-size: 1.2em;
}

/* Using Unicode characters as markers */
ol.custom ::marker {
  content: "➤ ";
}

Styling Input Placeholders

The ::placeholder pseudo-element allows customization of the placeholder text in form input fields, enhancing the visual experience of forms.

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

textarea::placeholder {
  color: #ccc;
  letter-spacing: 1px;
}

Selecting User-Selected Content

The ::selection pseudo-element defines the style of text selected by the user, including background color, text color, and more.

::selection {
  background-color: #ff5722;
  color: white;
}

/* Selection style for specific elements */
pre::selection {
  background-color: #333;
  color: #0f0;
}

Creating Complex Shapes and Effects

Combining ::before and ::after pseudo-elements enables the creation of various complex visual effects without additional HTML elements.

/* Creating a speech bubble */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}

/* Creating a gradient border effect */
.card {
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff0, #f0f);
  z-index: -1;
  border-radius: inherit;
}

Enhancing Accessibility

Pseudo-elements can be used to enhance accessibility, such as adding hidden text to icon buttons.

.icon-button::after {
  content: " (Open Menu)";
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Creating Complex Animation Effects

Pseudo-elements can serve as additional layers in CSS animations, enabling richer visual effects.

.loader {
  position: relative;
  width: 50px;
  height: 50px;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}
.loader::after {
  border-top-color: #e74c3c;
  animation-delay: 0.5s;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Applications in Responsive Design

Pseudo-elements are highly useful in responsive design, allowing generated content to adapt to different screen sizes.

/* Displaying a simplified title on small screens */
.page-title::before {
  content: "Home";
}
@media (min-width: 768px) {
  .page-title::before {
    content: "Welcome to Our Homepage";
  }
}

Creating Custom Checkboxes and Radio Buttons

Combining ::before and ::after pseudo-elements enables the creation of fully customized form control styles.

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 2px solid #ccc;
  vertical-align: middle;
}
input[type="checkbox"]:checked + label::after {
  content: "✓";
  position: absolute;
  left: 4px;
  color: #2196F3;
}

Implementing Text Effects

Pseudo-elements can be used to create various text effects, such as shadows, outlines, and gradients.

.text-effect {
  position: relative;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.text-effect::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  z-index: -1;
}

Creating Pagination and Table of Contents Styles

Combining ::first-letter with counters enables the creation of special table of contents or pagination styles.

/* Creating numbered headings */
h2 {
  counter-increment: section;
}
h2::before {
  content: counter(section) ". ";
  color: #f00;
}

Browser Compatibility Considerations

Although most modern browsers support pseudo-elements, compatibility issues must still be considered in practice. Newer pseudo-elements like ::marker and ::placeholder may require prefixes or fallbacks in older browser versions.

/* Syntax for older browser compatibility */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #999;
}
:-moz-placeholder { /* Firefox 18- */
  color: #999;
}