In CSS, ::before and ::after are pseudo-elements that are used to insert additional content before and after the content of the element without changing HTML. 1. When using it, it needs to be matched with content attributes to support strings, attribute values, pictures, etc.; 2. It is common to add quotes, icons, and build complex graphics; 3. Note that the pseudo-element defaults to inline, and display needs to be set to adjust the width and height, and events cannot be bound; 4. It can be combined with positioning to achieve hierarchical control, and adapt to responsive design through media queries. Mastering them can improve page expression and reduce structural redundancy.

In CSS, ::before and ::after are two very practical pseudo-elements that allow you to insert some extra content before or after the element content without changing HTML. This not only makes the page structure cleaner, but also achieves many visual effects.

1. Basic usage and syntax

The prerequisite for using ::before and ::after is that the target element must be a container class element, such as div , p , span , etc., and must be used with content attribute. If content is not set, the pseudo-element will not be displayed.

The basic writing method is as follows:

 .selector::before {
  content: "Prompt text";
}

.selector::after {
  content: "End Supplement";
}

• content can be a string, an attribute value (such as attr(data-text) ), an image (using url() ) or even an empty content "" .
• Usually, display , position , color and other styles are combined to control the appearance.

2. Common application scenarios

Add decorative content

For example, put quotes before and after the quotation block:

 blockquote::before {
  content: """;
  color: #888;
}

blockquote::after {
  content: """;
  color: #888;
}

In this way, you can add quotation marks in a uniform manner without modifying HTML.

Create small icons or tags

Commonly, add a small external link icon after the link:

 a.external::after {
  content: " (external link)";
  font-size: 0.8em;
  color: gray;
}

Or use background images instead of text content:

 a.external::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("external-icon.png");
  margin-left: 4px;
}

Build complex graphics (combining border and transform)

For example, using ::before and ::after can draw dialogue bubbles, triangles, badges and other effects. This type of technique is very common in button and label design.

3. Details to be paid attention to when using

• The pseudo-element is an inline element by default . If you want to set the width and height, you need to set display: block or inline-block .
• Pseudo-elements cannot bind events because they are not DOM nodes.
• If you want the pseudo-element to be positioned outside the parent element, you can combine position: absolute and parent position: relative to implement it.
• When multiple pseudo-elements are used simultaneously, you should pay attention to hierarchy issues, and the order can be controlled through z-index .
• In responsive design, media query can be used to control whether pseudo-elements are displayed to avoid excessive mobile content affecting reading.

For example: You want a prompt box to hide the ::after icon on the small screen:

 @media (max-width: 600px) {
  .tip::after {
    display: none;
  }
}

4. Summarize it

::before and ::after are very flexible gadgets in CSS. Although the functions are simple, they can produce many practical effects when paired with different styles. Mastering their usage can not only reduce the redundancy of HTML structure, but also improve the expressiveness of the page. Basically all that, if you use it too much, you will find that it is really easy.

The above is the detailed content of Using ::before and ::after pseudo-elements in css. For more information, please follow other related articles on the PHP Chinese website!