[This is the fifth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.]

CSS pseudo-elements are used to style specific parts of an element. As a review, here’s an explanation from the Mozilla developer website:

A pseudo-element is a keyword attached to the end of the selector that allows you to change the style of a particular part of the selected element. For example, the ::first-line pseudo-element can be used to change the style of the first line of text in a paragraph.

There aren’t many CSS pseudo-elements available, but it’s important as a front end engineer to be familiar with them, each with a specific purpose, and they can greatly improve your project UI.

Here are some common CSS pseudo-elements:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::selection

They all seem fairly simple and self-explanatory. However, they will help you build some clean and powerful layouts. Which one do you think is the coolest?

::before and :: After are by far the most commonly used pseudo-elements that can do really cool things while keeping HTML and CSS to a minimum.

In this article, we review common uses of ::before and ::after with examples.

grammar

Before we get started, let’s look at the general syntax of pseudo-elements:

selector::pseudo-element {
    property: value;
}
Copy the code

Note that the syntax above uses a double colon (::) instead of a single colon (:), which is CSS3 syntax. Originally, the syntax specification for CSS was a single colon (CSS2, CSS1).

This change was driven by the W3C, with the main aim of clearly distinguishing pseudo-classes that use a single colon.

What’s the difference between them? In simple terms, pseudo-classes are selected for non-rendering features; Pseudo-elements, on the other hand, are the ability to create new virtual elements. For backward compatibility, the single colon syntax in CSS2 and CSS1 is still supported in most browsers.

How do ::before and ::after work?

These pseudo-elements are used to add content before or after the target element, and there is a common misconception about where the content should be placed. Many people assume that content will be placed before or after the selected HTML tag. Instead, it will be placed before or after the content of the element. Let’s look at this example:

p::before {
    content: "DevPoint - ";
}
Copy the code
<p> </p>Copy the code

The CSS and HTML implementations above are equivalent to the following HTML:

<p>DevPoint - </p>Copy the code

Instead of:

DevPoint - <p> </p>Copy the code

Just like ::before and ::after add content before the content of the element. But there is one tag that doesn’t work: , which doesn’t add anything to it. It’s just a substitute for media content, which means it can’t handle any pseudo-elements.

The content attribute

For pseudo-elements, the content attribute is primary, and by default, the content is set to none. Means that if you try to style an element without adding this attribute, nothing will actually happen, like this:

p::before { 
    display:block;
    width: 100%;
    height: 50px;
    background-color: #ff0000;
}
Copy the code
<p> </p>Copy the code

The above example code has no real meaning for CSS styles.

Next, add the content attribute to the stylesheet as follows:

p::before {
    display:block;
    width: 100%;
    height: 50px;
    content: "";
    background-color: #ff0000;
}
Copy the code

The code above should see the red block in front of the paragraph content.

Even if you don’t want to add any text, you still need to use “” for the content attribute, which is one of the most common mistakes you can make when using pseudo-elements.

The content attribute is powerful and can be used to add various types of content. Using this attribute, you can display anything on a pseudo-element, which can be text, images, etc. When using this attribute, you need to note the following two points:

  1. contentThe default display isdisplay-inlineRather thandisplay:block;
  2. contentIs a string, the user will not be able to select, meaning the user will not be able to use the mouse to select to copy it.

content 值

You can use text values like Content :”DevPoint” directly. If you have too much content that needs to be written to content, writing directly to the stylesheet is not flexible enough. Here’s a more flexible approach, passed by variable, as follows:

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>CSS < span style =" text-align: left; color: RGB (50, 50, 50);" font-weight: bold; The font - size: 0.75 rem; } p::before { content: attr(data-before-text); background-color: #00ffff; Margin - right: 0.625 rem; Padding: 0.625 rem; } </style> </head> <body> <p data-before-text="DevPoint">Hello World! </p> </body> </html>Copy the code

The effect is as follows:

The code above passes the value of the content attribute via the element attribute data-before-text. Similarly, content can also be an image resource, like this:

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>CSS < span style =" text-align: left; color: RGB (50, 50, 50);" font-weight: bold; The font - size: 0.75 rem; } p::before { content: url(https://www.devpoint.cn/Apps/Site/View/devpoint/public/images/favicon.png); background-color: #00ffff; Margin - right: 0.625 rem; Padding: 0.625 rem; } </style> </head> <body> <p>Hello World! </p> </body> </html>Copy the code

The effect is as follows:

In addition to urls, properties and strings, the content property can contain multiple properties such as counters, quotes, and linear-gradient. For more information, see the full list on MDN Web Docs.

Examples show

Now let’s look at a common example effect of ::before, ::after, and Content combined.

1. Modify

One of the main examples is mainly for decorating, and you can use them to add some visual effects to an element, like this:

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>CSS < span style =" text-align: center; text-align: center;" text-align: center; } h1::after { content: ""; display: block; background-color: #19b5fe; Height: 0.2 em. width: 100%; } h1::before { content: ""; display: block; background-color: #19b5fe; Height: 0.2 em. width: 100%; } </style> </head> <body> <h1>DevPoint</h1> </body> </html>Copy the code

The effect is as follows:

2. blockquote

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>CSS < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important;" font-size: 1rem; font-style: italic; } blockquote::before { content: open-quote; font-style: normal; color: #585563; } blockquote::after {content: close-quote "--" attr(data-author); font-style: normal; color: #585563; "> < span style =" max-width: 100%; clear: both; min-height: 1em; </blockquote> </body> </html>Copy the code

3. Sorted list

Create a custom HTML ordered list by using counter-reset, counter-increment, and counter (counter-name).

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>CSS < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; counter-reset: chapter_counter; } li {margin-bottom: 2.5em; Margin - left: 2.5 em. position: relative; line-height: 2em; } li::before { content: counter(chapter_counter); counter-increment: chapter_counter; position: absolute; Left: 2.8 em. display: flex; align-items: center; justify-content: center; border-radius: 50%; font-style: normal; The font - size: 0.8 em. width: 2em; height: 2em; color: white; background-color: #0566e6; border: 2px solid #0046a1; Word-wrap: break-word! Important; "> < span style =" max-width: 100%; clear: both; < span style = "max-width: 100%; clear: both; clear: both; < p style = "max-width: 100%; clear: both; min-height: 1em; </li> </ol> </body> </html>Copy the code

conclusion

This article introduces the basic knowledge and common usage of ::before and ::after pseudo-elements. But not for the purposes of this article, there are many unintended effects that help reduce unnecessary markup and add value by enriching elements.