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

In this article Xiaobian for you to introduce in detail "what are the practical skills of CSS pseudo-elements", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the practical skills of CSS pseudo-elements" can help you solve your doubts.

Pseudo-elements, like pseudo-classes, are added to the selector, but not to describe the state, it allows us to set styles for some parts of the element; with pseudo-elements, we can simplify the html tag of the page, at the same time, it is also very convenient to use, and being good at using pseudo-elements can make your page more concise and elegant. It is called a pseudo element because it modifies parts that are not in the document tree; it is not real.

Practical tips for pseudo-elements

1. Clear float

What is meant by clearing floating -? If all the children of a parent element are floating, then the parent element has no height; the parent element does not deviate from the normal document flow and still occupies the space of the normal document flow; > 1. If the adjacent element of the parent element is an inline element, then the inline element will use all available space in the area of the parent element to find a place for it > 2. If the adjacent element is a block-level element, then setting the margin-top of the block-level element will start with the starting position of the parent element.

Question: how to solve the problem of high collapse?

Method: prop up the height of the parent container, considering that the floating element does not deviate from the normal document flow, and other elements will surround it, so the simple and effective way to remove the floating is to make the surrounding element unsurround, turn it into a ruler, put it at the back, and top up all floating elements, and this ruler is a block-level element with clear set. Because the block-level element wraps lines and sets elements that cannot float on both sides, it runs below the floating element, like a ruler to top up the contents of the floating element. This can be done with an after, because after is the last child element:

.clearfix: after {

Content: ""

Display: block

Clear:both

}

two。 Draw a dividing line

What if we encounter requirements like this in development? How should we implement it with only a simple css element?

Solution: a p label with left and right lines drawn with before and after:

3. Counter

We often use js to dynamically calculate the number of goods; I want to tell css that it can also achieve this effect, which is much easier to use than js.

1.counter-reset: property creates or resets one or more counters

2.counter-increment: property increments one or more counter values

3.content: used in conjunction with: before and: after pseudo elements to insert the generated content.

Without using a single line of js code, you can give it a try; this is mainly a combination of checked and counter, implemented in before/after pure CSS, which is purely show-off

4. Parallelogram

Is there any way to tilt the shape of the container and keep its contents unchanged? You may think of nesting two layers of elements, the outer layer skew (), to apply an inverse skew deformation to the content to counteract the effect of the deformation. But it means we have to wrap the content with an extra layer of HTML elements. It's a little cumbersome.

Solution: pseudo-element, apply the style to the pseudo-element, transform the pseudo-element, and then position the pseudo-element + level under the accommodation element.

All talk but no practice, try the fake style.

5. Trapezoidal tab

We often see trapezoidal tabs on web pages, and the common techniques are messy, or difficult to maintain, so how do they achieve it?

Solution: rotate a rectangle in the three-dimensional world, and because of the perspective, we can see a trapezoid on the two-dimensional image, which can be realized by combining the method of parallel quadrilateral realization.

Perspective: the distance between the observer and the zonal 0 plane

After using 3D deformation on an element, the internal deformation effect is "irreversible", which is different from 2D deformation (the internal reverse deformation of 2D deformation can counteract the external deformation effect).

In order to make it easier to master his size, we can specify transform-origin:bottom; for him or use scale () to perform aesthetic operations on him.

Try it

6 uniform layout of multiple columns

How to achieve the following multi-column uniform layout:

By setting the width of the inline-block to the pseudo element: after, and matching the text-align: justify of the container, you can easily achieve a uniform layout of multiple columns.

So why do you use: after pseudo-elements to achieve alignment?

The reason is that the first line of justify is aligned only if there is a second line, so here we need to create a fake second line, and the: after pseudo element is perfect.

It should be noted that single tags such as img/input do not have before/after pseudo elements, because they themselves cannot have child elements, and if you add a before to img, it will be ignored by the browser.

Reading here, this article "what are the practical skills of CSS pseudo-elements" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.