Introduction to three usages of css pseudo-elements::before and ::after (code examples)

This article will share with you an article about three usages of pseudo elements::before and ::after in CSS. Friends in need can refer to it.

For the ::before and ::after pseudo-elements, a good one was created using the css ::after pseudo-element in the previous article Overlay effect. But apart from this, they have many other uses. This article will introduce you to three other uses of ::before and ::after.

First, let’s take a brief look at how pseudo-elements work.

Notes on using ::after and ::before

The browser will render these elements as "generated content". The value can be set to an empty string: content: "";.

When the browser inserts this element into the DOM, it inserts it into the element used for the selector. This is the definition from the spec:

:: before represents a styleable child pseudo-element before the actual content of the original element

:: after immediately after the actual content of the original element Represents a styleable child pseudo-element.

By default, this new element will be an inline element. Once an element is inserted into the DOM, it can be modified like any other element. This gives us a lot of control over getting various.

Important note: Not all browser/screen reader combinations can read the content you place in the content pseudo-element. This should only be used for text elements. Real content should always be added to the page's markup.

Add icons next to certain types of links

If you want to provide users with more visual information about the link, you can add an icon using ::after instead No tags are added.

Add the "External Link" icon to links that are not absolute links.

a[href^="http"]::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
    background-size: contain;
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

In this code, assuming internal links are written as relative paths, we find any anchor tag that has an href element starting with http.

Another good example of this method is PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

For any href ending with .pdf, we can append the string "(pdf)." This ::after element is better than Images are easier to control as we have full CSS controls to adjust font size, color and any other effects.

For more information about these selectors, you can refer to the

css Online Manual of the PHP Chinese website.

Add interesting "borders" to containers

Before the Houdini Paint API comes to all browsers, you may find your elements very boring. But using simple CSS and ::before and ::after you can achieve some more interesting effects across all browsers.

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.related-article::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

In this example, we apply a background gradient to the parent element and use the ::before element to "clip" the interior with a simple background color. This gives the appearance of a border despite being two rectangles. Getting the dimensions to fit the border requires just some simple math.

By positioning pseudo-elements as absolute values, we can control their position. Sass makes math operations easier with variables and math functions.

What if we want our titles to have fancy little borders underneath them, but not a full border?

We can use the ::after element to achieve it.

.cool-border::after {
    content: "";
    display: block;
    height: 7px;
    background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 45%;
    transform: translateX(-50%) skew(-50deg);}.cool-border {
    position: relative;
}

In this example, we also place the pseudo-element in an absolute position. The size of our "border" depends on the height of the new element. If this is a right or left "border" you can use the element width to determine the size.

Since this is just one element on the page, we can also bias the borders.

Add style elements that do not require adding style tags

is a good semantic element. Let's not ruin it with extra markup.

In many ::after examples (including others in this article) you can see the pseudo-element position: absolute, and of course there is no rule saying this has to be the case.

Let's use ::before and ::after as grid-items to place quotes on a

.

By placing everything explicitly on the grid, we don't have to worry about extra wrappers. We can also use quotes as background images and allow them to minmax scaling in our simple grid-template-columns function.

Finally

In fact, there are many uses for the css pseudo-elements::after and ::before. Everyone should also use them in practical applications. There are better ones. Welcome to leave a message to discuss the usage.

The above is the detailed content of Introduction to three usages of css pseudo-elements::before and ::after (code examples). For more information, please follow other related articles on the PHP Chinese website!