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

This article will explain in detail how the pseudo-class after in CSS is, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

1. Introduction

When I was learning web layout some time ago, I naturally encountered clearing the floating float property because I was using the floating clear property. In the teaching case, the float is cleared by creating an empty div tag. The main code is as follows:

CSS

.mainBox {width:960px; margin:0 auto; background-color:#CFF; overflow:visible;} .leftBox {width:740px; height:300px; background-color:#C9F; float:left;} .rightBox {width:210px; height:300px; background-color:#FCF; float:rightright;} .clear {clear:both Height:0;/* solves the high level problem under IE6 * / overflow:hidden;}

After seeing it, it occurred to me that I had seen a way to clean up floats using the css pseudo-class after. I can't remember clearly, so I wrote it as follows:

CSS

.mainBox {width:960px; background-color:#CFF; margin:0 auto;} .leftBox {width:740px; height:300px; background-color:#C9F; float:left;} .rightBox {width:210px; height:300px; background-color:#FCF; float:rightright;} .rightBox: after {clear:both Content: "."; visibility:hidden; display:block; height:0; overflow:hidden;}

A tragedy has happened. The # CFF color in mainBox does not appear between leftBox and rightBox, indicating that there is something wrong with the above writing. After asking the great Google, I found that the after pseudo-class of css should be written after mainBox, that is:

CSS

.mainBox: after {clear:both; content: "."; visibility:hidden; display:block; height:0; overflow:hidden;}

P.S.

1. Looking back at the above methods, in fact, the so-called clear floats in the above methods prop up the height of the .mainBox without setting the height, so that the younger elements of the .mainBox can directly follow the .mainBox. It is not hidden under the floating child elements inside the .mainBox because of the height collapse of the .mainBox. You can also use a method of creating a BFC, such as overflow:hidden, to prevent a high collapse.

two。 If the .mainBox sets the height and is greater than or equal to its floating child elements, then the younger elements of the .mainBox will not be affected by the floating child elements inside the .mainBox without clearing the floats in this way.

3. If you don't consider the height collapse of. MainBox, just set the clear attribute at its younger brother element.

two。 Thinking about after

The introduction to after pseudo-classes in w3school is as follows:

Definition and usage

The after selector inserts content after the contents of the selected element.

Use the content property to specify what to insert.

What is more ambiguous are the last two words in this "behind the content of the selected element". At first I mistakenly thought it was to insert the contents of the after into the younger element position of the selected element.

CSS

.rightBox: after {

Content: "I'm after."

Display:block

}

Will produce something similar to

CSS

I'm after.

This effect (of course, the after pseudo-class doesn't actually produce a DOM element).

However, through the check of clearing the float with the css pseudo class after in the introduction, it is found that it should actually be understood that the contents of after are inserted into the child elements of the selected element, that is, the effect is similar to the following:

CSS

I'm after.

Therefore, it is possible to use mainBox:after {} in the introduction to implement after pseudo-class clearing floats instead of rightBox:after {}.

To sum up: the content generated by the after pseudo-class should be at the child position of the selected element (and at the end of all child elements, a few simple tests can be found without repeating it), rather than the sibling position of the selected element.

3. Examples in w3school

As you can see from this example, the default display mode for after pseudo-class content should be inline inline.

In fact, when I saw this example, I found that the content generated by the after pseudo-class should be in the position of the child element of the selected element. ). In the example, the after content of the p tag is displayed in a very clear way, and you can experience it carefully. Therefore, it is also important to look at the examples.

About how the pseudo-class after in CSS is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.