Valid front-end 4: Use pseudo elements as much as possible. Valid

Valid front-end 4: Use pseudo elements as much as possible. Valid

The pseudo element is a good thing, but many people do not use it because they think the pseudo element is too strange. In fact, the use of pseudo elements has many advantages, the biggest advantage is that it can simplify the html tag of the page, and it is also very convenient to use, good at using pseudo elements can make your pages more concise and elegant.

Better reading experience step: http://yincheng.site/using-before-after

1. Use Cases of pseudo elements

Pseudo elements are generally used for drawing, especially small elements such as irrelevant separators and points, as shown in the green box:

The separation line of the first figure above is drawn using before. You only need to set a class for the div. if you write a before for this class, the corresponding div will carry a separator line instead of adding each content, you have to manually add a span to draw the separator line.

2. What is a pseudo element?

A pseudo element is a child element of an element.And it is an inline Row Element. Add before and after to a tag and check with the browser:

We can see that before is the first child element of the label, and after is the last child element of the label.

This is actually equivalent to writing two spans:

But it is not the same as span, becausePseudo elements are pseudoPseudo means that you cannot use js to obtain this pseudo element, or add, delete, or modify a pseudo element, therefore, the advantages of pseudo elements are embodied here-you can use pseudo elements to create visual effects, but it will not increase the burden of js dom query, and it is transparent to JS. Therefore, even if you add many pseudo elements to the page, the DOM query efficiency will not be affected. At the same time, it is not an actual html tag, it can speed up the loading of html files in the browser, it is also helpful for SEO.

3. Use a pseudo element case 1. Draw a split line

Like the following or:

Its html structure is:

 

XHTML <P> or </p>

1	<P> or </p>

Is a p tag. The left and right lines are drawn using before and after:

Draw separation line CSS . Or {text-align: center ;}. or: after ,. or: before {content: ""; position: absolute;/* Note that an element absolute will be forcibly positioned */top: 12px; height: 1px; background-color: # ccc; width: 200px }. or: after {right: 0 ;}. or: before {left: 0 ;}

123456789101112131415161718

. Or {text-align: center ;}. or: after ,. or: before {content: ""; position: absolute;/* Note that an element absolute will be forcibly positioned */top: 12px; height: 1px; background-color: # ccc; width: 200px }. or: after {right: 0 ;}. or: before {left: 0 ;}

Note that line 1 of the Code above, although before and after are a row element, absolute will force it after Positioningdisplay:blockEven if you use dislay: table-cell or something like that.

If this line is needed in other places, I only need to set an or class for the label. If there are n identical places on the page, the page is reduced by 2n tags. A page has many visual auxiliary elements that can be painted with pseudo elements.

2. Clear floating

The floating clearfix clearing method, which is "very famous", is based on pseudo elements. What is floating clearing? If all the child elements of a parent element are floating, the parent element has no height. (1) if the adjacent element of the parent element is a row element, then the element in the row will be inserted in the parent element area, find a place where it can be placed (2) if the adjacent element is a block-level element, set the margin-top of the block-level element to start with the starting position of the parent element. This reflects two floating characteristics:

1) floating elements are not as positioned as absolute,It is not out of the normal Document Stream and still occupies the space of the normal document stream.. This space is exactly the border of the background of the normal document flow. On the contrary, other elements will be arranged around floating elements, and floating elements will occupy their background and border, as shown below:

The first section is arranged around pictures

The float attribute of the image also affects the second paragraph. That is to say, float occupies the background and border of the element at the corresponding position of the natural text stream, even if it is not in the same line as the float element.

2) Although the floating elements are still arranged in the parent container areaIt does not support the height of the parent container, The height of the parent container is 0px like that of no child element. Why is the design like this? Assuming that the floating container holds the height of the parent container, there will be no effect on the above (1). The two paragraphs are surrounded by an image, you need to know that floating occurs to solve the problem of text surrounding images. (For more details about floating, see my article: from the three-column adaptive width layout to the css layout)

Therefore, combining these two points can solve the problem of high collapse. The goal is to keep the height of the parent container up. Considering that the floating elements are not out of the normal Document Stream, other elements will surround it, so a simple and effective way to clear the floating is to make the surrounding elements unsurround, turn it into a ruler, put it at the end, and bring up all the floating elements, this ruler is a block-level element with clear settings. Because the block-level element will wrap the line and set the two sides of the element to not be floating, it will go below the floating element, just like a ruler to pin the content of the floating element. This can be implemented using an after, because after is the last sub-element:

Clearfix CSS . Clearfix: after {content: ""; display: table; clear: both ;}

12345

. Clearfix: after {content: ""; display: table; clear: both ;}

The line element is inline, so to change its display, many people ignore that before/after is a line element.

3. Clever Use of pseudo elements for some special effects

The biggest advantage of using before is that it can be controlled with CSS. Therefore, you can dynamically add and delete a class, or combine the: hover: active and other pseudo classes for some effect.

1) For example, the following input box has two statuses: editing and viewing. If you are viewing the box, it cannot be entered. An intuitive way is to disable input and select one by one, however, this is too troublesome. A very simple method is to draw an after Code to cover it.

As follows:

Cover the editing area CSS Form: after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100% ;}

12345678

Form: after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100% ;}

2) You can also use a pseudo element to display text, that is, set its content. However, this type is generally used less, and more is the icon font. You can use its content to do some interesting things, such as the following count, without a line of js Code:

 

You have selected a fruit

Here the CSS counter is used, combined with pseudo elements, the Code is as follows:

XHTML <Style>. choose {counter-reset: fruit ;}. choose input: checked {counter-increment: fruit ;}. count: before {content: counter (fruit );} </style> <div class = "choose"> <label> <input type = "checkbox"> Apple </label> <input type = "checkbox"> banana </label> </div> <p> you have selected <span class = "count"> </span> fruit </p>

1234567891011121314151617

<Style>. choose {counter-reset: fruit ;}. choose input: checked {counter-increment: fruit ;}. count: before {content: counter (fruit );} </style> <div class = "choose"> <label> <input type = "checkbox"> Apple </label> <input type = "checkbox"> banana </label> </div> <p> you have selected <span class = "count"> </span> fruit </p>

3) Some people have made some games, such as the following ASCII code game. An ASCII code consists of eight digits. By opening different digits, it will become different characters:

This is mainly a combination::checkedAndcounter, Implemented with before/after pure CSS, that is, the amount of code is a bit large, this is purely a Hyun. There are other Games. For details, see Pure CSS Games with Counter-Increment.

 

Note thatimg/inputSingle tags do not have before/after pseudo elements, because they cannot have child elements themselves. If you add a before to img, it will be ignored by the browser.

 

Additional reading: