If you've been keeping a close eye on the various web design blogs, you may have noticed: before and: After pseudo elements have gained considerable attention in front-end development. Especially in Nicolas Gallagher's blog, a lot of pseudo-class elements were used later.
Nicolas Gallagher uses pseudo-elements to create 84 GUI icons with static HTML tags.
To complement the above (and take advantage of current trends in development), I collect something that runs entirely under pseudo-elements. This article is focused on this kind of crowd, that has seen the use of pseudo-elements to make a very cool thing, but want to know all about before in the application of CSS technology.
Although the CSS specification contains other pseudo-elements, our focus is: Before and: After. So, for the sake of brevity, what I call "pseudo-elements" refers to these two special pseudo-elements.
What can pseudo-elements do?
"Pseudo-elements", as the name implies. It creates a false element and inserts it before or after the content of the target element.
The word "pseudo" is the English translation of the Greek language, its basic meaning is "lying, dishonest, wrong." "So it is appropriate to call pseudo elements." Because it doesn't actually change anything in the document. Instead, they are like ghostly elements inserted in CSS, they are visible to the user and can be controlled by CSS.
Basic syntax
: Before and: After pseudo-element encoding is very simple (as with most CSS properties, it does not require a lot of prefixes). Here is a simple example.
#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 that owns the property ID will have a hash symbol placed before the content, and a period after the content.
Grammar notes
You can set the Content property value to null and just treat him as a box with little content. Like this:
#example: Before { content: ""; Display:block; width:100px; height:100px; }However, you can't completely remove the content property, and if you remove it, the pseudo-element will not work. At a minimum, 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've discussed before. The short explanation is that there is no difference between the two syntaxes, and the only difference is that the pseudo-element (double colon), the pseudo-class in CSS3 (single colon)
Finally, in terms of grammar. Technically, you can apply pseudo-elements in general, not on special elements like this:
: Before { content: "#"; }Although the above is valid, it is very useless. The code inserts a hash symbol before the contents of each element in the DOM. Even if you delete the <body> tag and all of its contents, you will still see two hash symbols on the page: one in Features of inserting 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 an inline element by default (or, in HTML5, in the category of text semantics). So, in order to give the inserted element a height, padding, margin, and so on, you usually have to explicitly define it as a block-level element.
This will be a brief description of how to design the pseudo-elements, look at the image of the text editor below me
In this example, the style I highlight will be applied to the element to be inserted before and after the content of the target element.
Also note that a typical CSS inheritance rule applies to the inserted element. For example, you have font series in boldface, Arial, sans serif fonts applied to the BODY element, and pseudo-elements inherit these font families like other elements.
Similarly, pseudo-elements do not inherit styles that do not naturally inherit from parent elements such as padding and margins.
What is it before or after?
Your intuition is: before and: After pseudo-elements may be inserted content injected into the target element before or after injection. But, as mentioned above, this is not the case.
The injected content will be a child element of the associated target element, but it will be placed in the "front" or "post" of any content of this element.
To prove this, look at the code below. First, in HTML:
<p class= "box" >other content.</p>
Here is the CSS for inserting pseudo-elements:
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 see a paragraph of text with a class of box, and the text "other content" in the inside (as you will see, if you see the source code of the home page). In CSS, this content is set to width, as well as some padding and visible borders
Then we have the pseudo-elements. In this example, it is a hash symbol before the content is inserted into the paragraph. The CSS then gives it a border as well as some padding and margins.
Here are the results viewed in the browser:
The box outside is this paragraph. A border around a hash symbol represents the boundary of a pseudo element. So, instead of inserting "before" into a paragraph, the pseudo-element is placed in front of the "other content" of this paragraph.
Inserting non-textual content
I briefly remind you that you can set the value of a 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 would do with a background image in a CSS.
P:before { content:url (image.jpg); }Note You cannot 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, inserted instead of the image itself.
Of course, you can include a data URI instead of an image reference, just as you can with a CSS background.
You can also choose the form of a function in ATRR (X). This feature, according to the specification, "returns the value of the X property as a string"
Here is an example:
A:after { content:attr (href); }What is the function of the attr () function? It gets the value of a particular property and makes it a pseudo-element as the inserted text.
The above code causes the href value of each <a> element on the page to immediately be placed behind each of the respective <a> elements. When a document is printed, it can be used as a plot style table that contains all the URLs.
You can also use this function to get the title property of an element, or even the value of a microdata. Of course, not all examples conform to their reality, but depending on the situation, a specific attribute value as a pseudo-element can be actual
However, it is not possible to get the alt value of the title or image and display it as the actual pseudo-element on the page. Remember that the pseudo-element must be a child of the applied element. The image, which is void (or an empty element), has no child elements, so it is not available in this column, and also applies to other empty elements, such as:<input>.
Scary Browser compatibility
The development momentum of any front-end technology, the first problem is browser support. In this case, it is not a big problem.
Browser support: Before and: After pseudo-element stack, like this:
Chrome,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
ie8+ (with some minor bugs),
Almost all of the mobile browsers.
The only real problem is the lack of support (not surprisingly) for IE6 and IE7. So, if your enthusiasts are in good shape for web development (or other market with lower IE versions), you can continue to use pseudo-elements freely.
Pseudo-elements are not conclusive.
Fortunately, the lack of pseudo-elements does not cause big problems. In most cases, pseudo-elements typically decorate (or help) content without causing problems for unsupported browsers. So, if your supporters have a higher version of IE, you can still use them in some way.
Some reminders
As mentioned earlier, pseudo-elements do not appear in the DOM. These elements are not true elements. Therefore, they are not available. So, instead of using pseudo-elements to generate content, it is critical to the usability and accessibility of your Web pages.
Another thing to keep in mind is that development tools, such as Firefox, do not display content with pseudo-elements. Therefore, if used, pseudo-elements can cause difficult maintenance and slow debugging.
(update: As mentioned in the comments, you can use Google's development tools to view the associated style of a pseudo-element, but it will not appear in the DOM element.) Meanwhile, Firefox added pseudo elements to support it in version 1.8. ）
The idea you need to use is to use this technique to create something useful. At the same time, to further study the CSS pseudo-elements, be sure to look at some of the articles we have linked.
Translator Sign Language: The entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
