Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "css pseudo elements:: before and:: after". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "css pseudo elements:: before and:: after how to use" article can help you solve the problem.

First of all, let's take a brief look at how pseudo elements work.

Considerations about using:: after and:: before

Browsers render these elements as "generated content" when and only if they have the value of the content property. This value can be set to the 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 in the specification:

:: before represents a child pseudo element that can be styled before the actual content of the original element

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

By default, this new element will be inline. After you insert an element into the DOM, you can modify it just like any other element. This gives us a lot of control to get all kinds of.

Important: not all browser / screen reader combinations can read what you put in content pseudo-elements. This should be used only for text elements. You should always add real content to the markup on the page.

Add icons next to some types of links

If you want to provide users with more visual information about links, you can use:: after to add icons instead of tags.

Add the external Link icon to the link that is not an absolute link.

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 that internal links are written as relative paths, we find any anchor tags with href elements that start with http.

Another useful example of this method is PDF

A [href$= ".pdf"]:: after {

Content: "(pdf)"

Font-size:.8em

Color:tomato

}

For any href that ends in .pdf, we can append the string "(pdf)." This:: after element is easier to control than an image because we have a complete CSS control that can adjust font size, color, and any other effects.

For more information about these selectors, you can refer to the css online manual of PHP Chinese website.

Add interesting "borders" to the container

Before HoudiniPaintAPI accesses all browsers, you may find your elements very boring. But with simple CSS and:: before and:: after, you can bring some more interesting effects to all browsers.

. related-article {

Padding:20px

Position:relative

Background-image:linear-gradient (120degthime eaee4meme 33d0ff)

}

. related-article* {

Position:relative;//Setstackingcontexttokeepcontentontopofthebackground

}

. 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 "cut" the interior with a simple background color. Although it is two rectangles, this gives the appearance of the border. To get the right size for the frame, it only takes some simple mathematical operations.

By positioning the pseudo element as an absolute value, we can control its position. Sass can make mathematical operations easier through variables and mathematical functions.

If we want our titles to have fancy little borders under them, what if it's not a complete boundary?

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

. cool-border::after {

Content: ""

Display:block

Height:7px

Background-image:linear-gradient (120degthence5ea15recorder 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 put the pseudo element in an absolute position. The size of our "boundary" depends on the height of the new element. If this is a "border" on the right or left, you can use the element width to determine the size.

Since this is just an element on the page, we can also skew the boundary.

Add style elements that do not need to add style tags

It is a good semantic element. Let's not destroy it with extra marks.

In many:: after examples (including other examples in this article), you can see the pseudo element position:absolute, and of course there is no rule that this must be the case.

Let's use:: before and:: after as grid-items to put quotation marks over a.

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

This is the end of the introduction to "css pseudo elements:: before and:: after". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.