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

Today, I would like to share with you the relevant knowledge points about how to use before and: after pseudo elements in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Nicolas Gallagher uses pseudo elements to create 84 GUI icons with static HTML tags.

To supplement the above (and take advantage of current trends), I collect something that runs entirely under pseudo elements. This article is aimed at this group of people, that is, they have seen cool things made with pseudo elements, but want to know all about the use of before in css technology.

Although the css specification contains other pseudo elements, our focus is: before and: after. Therefore, for the sake of simplicity, what I mean by "pseudo elements" generally refers to these two special pseudo elements.

What can pseudo elements do?

"pseudo element", as the name implies. It creates a fake element and inserts it before or after the content of the target element.

The word "pseudo" is the English translation of Greek, and its basic meaning is "lying, dishonest, wrong." Therefore, it is appropriate to call pseudo elements. Because it doesn't actually change anything in the document. Instead, they are ghostly elements inserted into the css, and they are visible to the user and can be controlled by css.

Basic grammar

: before and: after pseudo-element coding is very simple (like most css attributes do not require a lot of prefixes). Here is a simple example.

CSS Code copies content to the clipboard

# example:before {

Content: "#"

}

# example:after {

Content: ".

}

Two things are mentioned in this example. First, we use # example:before and # example:after to target the same elements. Strictly speaking, they are pseudo elements in the code.

Second, it is mentioned in the content module that pseudo-elements are useless if the "content" attribute is not set.

In this example, the element with the attribute id will have a hash symbol before the content and a period after the content.

Grammar notes

You can set the value of the content property to empty and just treat it as a box with little content. Like this:

CSS Code copies content to the clipboard

# example:before {

Content: ""

Display: block

Width: 100px

Height: 100px

}

However, you cannot remove the content attribute completely, and if you remove it, the pseudo-element will not work. At the very least, the content property requires a null reference as its value (that is, content: "").

You may have noticed that you can also write pseudo elements with two colons (:: before and:: after), which I discussed before. The short explanation is that there is no difference between the two grammars, except that the pseudo element (double colon) and the pseudo class in css3 are (single colon).

Finally, in terms of grammar. Technically, you can generally apply pseudo elements, not on special elements, like this:

CSS Code copies content to the clipboard

: before {

Content: "#"

}

Although the above is effective, it is very useless. The code inserts a hash symbol before the contents of each element in the DOM. Even if you delete the tag and all its contents, you will still see two hash symbols on the page: one in the tag and the other in the tag, which one will be automatically created by the browser.

Characteristics of the inserted content

As mentioned earlier, the inserted content is not visible in the source code of the page. Can only be seen in css

At the same time, the inserted element is inline by default (or, in html5, in the category of text semantics). Therefore, in order to assign height, fill, margins, etc., to the inserted element, you usually have to explicitly define it as a block-level element.

This will be a brief description of how to design pseudo elements. Take a look at the picture in my text editor below.

In this example, my highlighted style will be applied to the element and inserted in front of and behind the contents of the target element.

Also note that the typical CSS inheritance rules apply to inserted elements. For example, you have font series boldface, bold, sans serif fonts applied to body elements, and pseudo elements inherit these font families like other elements.

Similarly, pseudo elements do not inherit styles that do not inherit naturally from parent elements, such as padding and margins.

What is it before or after?

Your intuition is that before and: after pseudo elements may be inserted content will be injected into the target element before or after injection. However, as mentioned above, this is not the case.

The injected content will be a child of the associated target element, but it will be placed "before" or "after" any content of this element.

To prove this, look at the following code. First, in HTML:

XML/HTML Code copies content to the clipboard

Other content.

Here is the css that inserts the pseudo element:

CSS Code copies content to the clipboard

P.box {

Width: 300px

Border: solid 1px white

Padding: 20px

}

P.box:before {

Content: "#"

Border: solid 1px white

Padding: 2px

Margin: 0 10px 0 0

}

In this html, you are looking at a piece of text with a box of a class, and the text "Other content" in it (as you will see, if you see the source code on the front page). In css, this section is set to a width, as well as some padding and visible borders

And then we have pseudo elements. In this case, it is a hash symbol inserted before the content of the paragraph. Then css gave it a border and some padding and margins.

Here is the result viewed in the browser:

The box outside is this paragraph. Represents the boundary of a pseudo element around a border with a hash symbol. So instead of inserting "before" into the paragraph, the pseudo element is placed in front of the "Other content" of the paragraph.

Insert non-text content

As a brief reminder, you can set the value of the property to an empty string or insert text content. You basically have two additional options for what the value of the attribute should contain.

First, you can include a URL that points to an image, just as you can include a background image in css.

CSS Code copies content to the clipboard

P:before {

Content: url (image.jpg)

}

Be careful not to use quotation marks. If you enclose the URL in quotation marks, it becomes a string and inserts the text "url (image.jpg)" as its content, not the image itself.

Of course, you can include a Data URI instead of an image reference, just as you can use a css background.

You can also choose the form of the function in ATRR (X). This function, according to the specification, "returns the value of the X attribute as a string"

Here is an example:

CSS Code copies content to the clipboard

A:after {

Content: attr (href)

}

What is the function of the attr () function? It takes the value of a specific attribute and makes it a pseudo element as inserted text.

The above code causes the href value of each element on the page to be placed immediately after each individual element. When a document is printed, it can be used as a print style table that contains all the URl.

You can also use this function to get the title attribute of the element, or even the value of microdata. Of course, not all examples conform to their own reality, but depending on the situation, a specific attribute value as a pseudo-element can be practical.

However, it is impossible to get the value of title or the alt of an image and display it on the page as an actual pseudo element. Remember that the pseudo element must be a child of the element being applied. The image, which is a void (or empty element), has no child elements, so it is not available in this column, and it also applies to other empty elements, such as:.

Terrible browser compatibility

The first problem with the development momentum of any front-end technology is browser support. In this case, it is not a big problem.

Browsers support: before and: after pseudo element stacks, like this:

Chrome 2 +

Firefox 3.5 + (3.0 had partial support)

Safari 1.3 +

Opera 9.2 +

IE8+ (with some minor bugs)

Almost all mobile browsers.

The only real problem is the (not surprisingly) IE6 and IE7 that are not supported. So, if your enthusiasts are in good and suitable web development (or other markets with lower IE versions), you are free to continue to use pseudo elements.

Pseudo elements are not decisive.

Fortunately, the lack of pseudo elements does not cause a big problem. In most cases, pseudo elements generally embellish (or help) the content and do not cause problems for unsupported browsers. So, if your supporters have higher IE versions, you can still use them to some extent.

Some reminders

As mentioned earlier, pseudo elements do not appear in DOM. These elements are not real elements. Therefore, they are not available. Therefore, do not use pseudo elements to generate content, which is the key to the usability and accessibility of your web page.

Another thing to remember is that development tools, such as Firefox, do not display content with pseudo elements. So, if used, pseudo elements can make it difficult to maintain and slow to debug.

That's all of the article "before and after pseudo elements in CSS: how to use them". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.