Learning and using: before AND: after pseudo elements, after pseudo
If you have been paying close attention to various web design blogs, you may have noticed that: before AND: after pseudo elements have received considerable attention in front-end development. Especially in the blog of Nicolas Gallagher, many pseudo-class elements are used later.
Nicolas Gallagher uses pseudo elements to create 84 GUI icons with static HTML tags.
To supplement the above content (and to take advantage of the current development trend), I collect something that runs completely under pseudo elements. This article focuses on this type of group, that is, we have seen something cool with pseudo elements, but want to know all the usage 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, the "pseudo elements" I mentioned refer to these two special pseudo elements.
What can pseudo elements do?"Pseudo element", as its name implies. It creates a false element and inserts it before or after the content of the target element.
The word "pseudo" is an English translation of Greek. It basically means "lying, dishonest, and wrong ." Therefore, pseudo elements are suitable. Because it does not actually change anything in the document. On the contrary, they are elements like ghosts inserted into css. They are visible to users and can be controlled through css.
Basic syntax: Before AND: after pseudo-element encoding is very simple (like most css attributes, a lot of prefixes are not required ). Here is a simple example.
| 1234567 | #example:before { content: "#";} #example:after { content: ".";} |
Two things are mentioned in this example. First, we use # example: before and # example: after to lock the same elements. Strictly speaking, they are pseudo elements in the code.
Second, as mentioned in the content module, if the pseudo element does not set the "content" attribute, the pseudo element is useless.
In this example, an element with an attribute id will have a hash symbol placed before the content, and a period after the content.
Grammar noteYou can set the content attribute value to null and treat it as a box with few contents. Like this:
| 123456 | #example:before { content: ""; display: block; width: 100px; height: 100px;} |
However, you cannot completely remove the content attribute. if you remove the attribute, the pseudo element will not work. At least, the content attribute must be null referenced as its value (I .e., content: "").
You may notice that you can also use two colons (: before AND: after) to write pseudo elements, which I have discussed before. The short explanation is that there is no difference between the two syntaxes. The only difference is that the pseudo elements (double colons) and the pseudo classes in css3 are (single colons)
Finally, in terms of syntax. Technically, you can apply pseudo elements in general, rather than on special elements, like this:
| 123 | :before { content: "#";} |
Although the above is valid, it is useless. The Code inserts a hash symbol before the content of each element in the DOM. Even if you delete the <body> tag and all its contents, you will still see two hashes on the page: one in Insert Content features
As mentioned above, the inserted content is invisible in the source code of the page. Only visible in css
At the same time, the inserted element is an inline element by default (or, in html5, In the text semantic category ). Therefore, to assign height, padding, and margin to the inserted element, you must explicitly define it as a block-level element.
This is a brief description of how to design pseudo elements. Let's take a look at the figure below in the text editor.
In this example, the highlighted style will be applied to the element and inserted to the front and back of the target element content.
Note that the typical CSS inheritance rules apply to the inserted elements. For example, if you have a font family of,, and unlined fonts applied to the body element, the pseudo elements will inherit the font family like other elements.
Similarly, pseudo elements do not inherit styles that do not naturally inherit from parent elements (such as padding and margins.
Before or after?Your intuition is: before AND: after pseudo elements may be that the inserted content will be injected before or after the target element. However, as mentioned above, this is not the case.
The injected content will be a child element of an associated target element, but it will be placed before or after any content of this element ".
To prove this, take a look at the following code. First, in HTML:
| 1 | <p class="box">Other content.</p> |
The following is the css for inserting pseudo elements:
| 123456789101112 | 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, the text you see contains a box of the class, and the text "Other content" is in it (as you will see, if you see the source code of the homepage ). In css, the content is set with width and some padding and visible borders.
Then we have a pseudo element. In this example, it is a hash symbol inserted before the content of this section. Then css gave it a border and some padding and margins.
Here is the result in the browser:
The box outside is the paragraph. The border with hashes represents the border of the pseudo element. Therefore, instead of inserting "before" into a paragraph, the pseudo element is placed before the "Other content" of the paragraph.
Insert non-text contentIn my brief reminder, you can set the attribute value to an empty string or insert text content. Basically, you have two additional options for the attribute value.
First, you can include a URL pointing to an image, just like adding a background image in css.
| 123 | p:before { content: url(image.jpg);} |
Note that quotation marks are not allowed. If you use the URL number, the URL will be converted into a string and inserted into the URL (image.jpg) as the content, instead of the image itself.
Of course, you can include a Data URI instead of image reference, just as you can use the css background.
You can also select the function form in ATRR (X. This function, according to specifications ?, "Returns the value of the X attribute as a string"
The following is an example:
| 123 | a:after { content: attr(href);} |
What are the functions of the attr () function? It obtains the value of a specific attribute and uses it as the inserted text to become a pseudo element.
The above code causes the href value of each <a> element on the page to be immediately placed behind each <a> element. When a document is printed, it can be used as a print style table containing all URLs.
You can also use this function to obtain the title attribute of an element or even the value of microdata. Of course, not all examples are in line with their own reality, but according to different situations, a specific attribute value can be actual as a pseudo element.
However, it is impossible to obtain the alt value of the title or image and display it as an actual pseudo element on the page. Remember that the pseudo element must be a child element of the applied element. Image, which is a void (or empty element) with no child element. Therefore, it is not available in this column. It is also applicable to other empty elements, for example: <input>.
Terrible browser compatibilityThe first problem with the development of any front-end technology is browser support. In this case, it is not a big problem.
The browser supports: before AND: after pseudo-element stacks, such:
The only real problem is that IE6 and IE7 are not supported (not surprising. Therefore, if your fans are well-suited for web development (or other markets with lower IE versions), you can continue to use pseudo elements freely.
Pseudo elements are not decisive.Fortunately, the lack of pseudo elements won't cause big problems. In most cases, pseudo elements are usually used to modify (or help) the content and do not cause problems for unsupported browsers. So if your supporter has a higher IE version, you can still use them to some extent.
Some remindersAs mentioned above, pseudo elements will not appear in the 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 availability and accessibility of Your webpage.
Another thing to remember is that development tools such as Firefox do not use pseudo elements to display content. Therefore, if it is used, pseudo elements will cause difficulties in maintenance and slow debugging.
(Updated: as mentioned in the comments, you can use Google's development tool to view the style associated with a pseudo element, but it will not appear in the DOM element. At the same time, Firefox adds a pseudo element to version 1.8 to support it .)
The idea you need is to use this technology to create practical things. At the same time, we will take a look at some of the articles we have already linked to further study of CSS pseudo elements in the future.
Translator's sign language:The whole translation is carried out in accordance with the original line, and a personal understanding of the technology is added in the translation process. If there is something wrong with the translation, please contact your colleagues. Thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
