How to Use: before and: After pseudo elements?

If you have been paying close attention to various blogs about web design, you may notice that: before and: After pseudo elements have received more and more attention in the front-end development field, and there is a good reason. In particular, there was a blogger, Nicolas Gallagher, a London-based developer, who attempted to apply pseudo elements and gave them a shocking exposure opportunity.

These 84 GUI icons are created using pseudo elements and semantic HTML. View demo

In order to supplement and enhance this exposure (and take advantage of the development trend), I sorted out a self-deemed complete "Past and Present" about pseudo elements ". This article is intended for those who have seen the cool effects of some pseudo-element applications and want to try it on their own. But they should first understand this CSS technology.

Although CSS rules include other pseudo elements, when I mention pseudo elements in this article, I specifically refer to: BEFORE AND: After.

What do pseudo elements do?

What a pseudo-element does is like its literal meaning. It creates a false element and inserts it before and after the content of the target element.

Basic syntax

Code for: before and: After pseudo elements is easy to write. This is an example:

1 2 3 4 5 6 7

# Example: before { Content :"#"; } # Example: After { Content :"."; }

Pay attention to two points for this example.

First, we also use before and after to work on the same target element. For example, they all act on the elements whose ID is example.

Second, if there is no content attribute (it is part of the content model definition), the pseudo element is invalid. That is, if you want to use a pseudo-element selector to define the attribute, you need to have the content attribute. Otherwise, adding any other style attributes will be meaningless.

In this example, the pseudo content is displayed before or after the content of the element whose ID is example.

Several points should be emphasized about this syntax.

You can leave the content attribute blank to create a "zero content" box. As follows:

1 2 3 4 5 6

# Example: before { Content :""; Display: block; Width: 100px; Height: 100px; }

However, the TAG content cannot be removed. Otherwise, the pseudo element does not work. This "zero content" requires a double quotation mark (") for the blank content of the content attribute.

You may notice that: before AND: after can also be written as: before AND: after. In fact, there is no difference between the two, but they are used in CSS3 to distinguish pseudo classes (single colon) and pseudo elements (double colons ).

Finally, you can apply a pseudo element without acting on any target element. As follows:

1 2 3

: Before { Content :"#"; }

This is an effective method, but it is useless at all.

What are the features of the inserted content?

As described above, the inserted content is invisible in the source code of the page. It is only visible in CSS.

Similarly, the inserted content is an inline element by default. Therefore, to insert an element such as height, padding, and Margin, you must first define the element as a block-level element.

The following describes how to define pseudo elements.

Styles-pseudo-elements

In this example, the style of the inserted element is highlighted. The pseudo element is so unique that the inserted content and style can be defined in the same declaration block at the same time.

In addition, you must know that CSS inheritance rules also apply to inserting elements. For example, the font, font size, and other styles that are applied in the body are inserted with the same elements as other elements.

Similarly, like other elements, pseudo elements do not inherit attributes such as padding and margin at the parent level.

Before and after insert?

You may be confused, where is the inserted element? As you can see, before And: after may be considered to be before or after the target element to which it is applied. However, this is not the case.

The content to be inserted will be placed in the target element as a child element of the object, and it will be displayed before or after the content in the target element.

To understand this, let's look at the Code:

1 2	<P class = Box> other content. </P>

Style:

1 2 3 4 5 6 7 8 9 10 11

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 HTML, what you see is a paragraph (p). This p has a class of box, the content is "other content" (as you will see in the source code of html ). In CSS, the p is defined as width \ padding \ border.

Then, let's look at the definition of pseudo elements. In this example, the inserted content is placed before the content in paragraph (p. The defined style is border \ padding \ margin.

Let's look at the figure.

Before or after what?

The outer frame is a paragraph, and the content is inserted in the content of the paragraph before the paragraph, rather than before the paragraph.

Insert non-text content

I mentioned earlier that you can set the content attribute to a null character or a text content. In fact, you have two other options: add specific content to it, as shown below:

First, you can include a URL pointing to an image. Here, you can define a data Uri, just like you want to define a background image.

1 2 3

P: Before { Content: url(image.jpg ); }

Second, you have another option to add functions in the form of ATTR (X. According to the definition, this function returns a string generated by the value of attribute X for the selector object.

1 2 3

A: After { Content: ATTR (href ); }

The ATTR () function gets the defined attribute value and uses it as text to convert it into a pluggable pseudo content.

Browser support

Like some other front-end technologies, one of the key concerns of developers is browser support. At this point, it seems that the problem is not that big. Browser support for: before and: After is as follows:

Chrome 2 +,
Firefox 3.5 + (partially supported in 3.0 ),
Safari 1.3 +,
Opera 9.2 +,
IE8 + (Small bugs ),
Most mobile device browsers.

The only real problem (no doubt) Here is that IE6 and IE7 are completely unsupported. Therefore, if your target user is a Web Developer group (or a group that rarely uses IE), you can use it boldly.

In addition, speaking of the security of pseudo elements, fortunately, the lack of a pseudo element will not cause any functional problems. Most pseudo elements are used to generate decoration content. In browsers that do not support pseudo elements, this will not cause major problems. Therefore, if you target a majority of Internet Explorer users, you can still use this attribute to some extent.

Several reminders

As described above, the contents of pseudo elements are not displayed in the DOM structure. These elements are not real elements. They are inaccessible to most auxiliary devices. Therefore, we recommend that you avoid using pseudo elements to generate content that is critical to the usability and availability of web pages.

In addition, developer tools such as Firebug do not display content generated by pseudo elements. Therefore, misuse of pseudo elements may lead to problems such as low efficiency during webpage debugging and inconvenient webpage maintenance.

([Update] Two points mentioned in the comment: You can use chrome's developer tool to view the style of pseudo elements, but this element is not displayed in the DOM. In addition, Firebug1.8 has added support for pseudo elements .)