[CSS advanced] the magic of pseudo elements-the beauty of a single tag

[CSS advanced] Amazing use of pseudo elements-the beauty of a single tag recently studied the masterpiece css secret (css secret), which provides a deeper understanding of CSS, tossing the following project:

CSS3 whimsy-Demo (Please open it in the Chrome browser. It is worth reading ). Use a single label to complete various patterns. Many patterns are related to this article.

I also hope that some of my colleagues can click star: CSS3 on my Github.

Starting from here, this article mainly describes the advantages of the pseudo elements before and after.

: Before AND: before

Before introducing specific usage, we will briefly introduce pseudo classes and pseudo elements. Many people hear more about the pseudo-elements. The pseudo elements may not hear so frequently. In fact, CSS has a distinction between them.

Sometimes you will find that the pseudo-class Element uses two colons (: :) instead of a colon (:), which is part of the requirements in CSS3 specifications, to distinguish between pseudo-classes and pseudo elements, most browsers support these two expressions.

#id:after{ ...}#id::after{ ...}

A single colon (:) is used for the CSS3 pseudo class, and a double colon (: :) is used for the CSS3 pseudo element. For the existing pseudo elements in CSS2, for example, before, the single colon and double colon are written in the same way: before.

Therefore, if your website only needs to be compatible with browsers such as webkit, firefox, and opera, we recommend that you use double colons for pseudo elements. If you have to be compatible with IE browsers, it is safer to use a single colon in CSS2.

For more information, see how MDN understands pseudo classes and pseudo elements.

The main character of this article is the pseudo elements before and after. The charm of these two pseudo elements will be described below.

Clear floating with after

It is estimated that the frontend knows that the use of the "after" pseudo element to clear page floating will not be explained too much.

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }

　　

Pseudo element and css sprites Sprite

This is also the old posture. Sprite should be familiar to everyone. By combining multiple image icons into one image, many websites still have a great demand for Sprite in order to reduce http requests.

However, in the process of creating a Sprite, or the sprite images automatically generated by many packaging tools, there is a problem of how many margins need to be reserved for each icon. Let's see:

-->

For example, in the above situation (assuming that the icon in the button uses the sprite image), the product suddenly requires the button to change from the Left State to the right state on a certain day, then the previously reserved position margin of the sprite image is definitely not enough, this causes other images to appear in the button.

We usually do not add one more tag for a small icon (non-semantic ).

Therefore, if Sprite is used in this case, a pseudo element is set in the button to set the height and width of the pseudo element to the size of the original icon, use absolute positioning to locate the desired location, so that no matter how many margins each icon in the Sprite can be perfectly adapted.

Light and Dark changes of buttons hover and active in a single color

Recently, the project has such a requirement. According to different business scenarios, the operation needs to configure different background color values for a button. However, we know that a button usually has three color values: normal, hover, and active. Generally, hover is a little brighter than the primary color, active is a little darker.

Probably like this ():

To reduce the burden on operation personnel, how can we configure only one background color without configuring the hover and active colors so that the buttons can adapt to changes. Yes, you can use the before and after pseudo elements.

Color knowledge

Here, let's take a look at the knowledge of color values. We are familiar with color notation in addition to # fff, rgb (255,255,255), and hsl (0,100%, 100%) (HSV ).

Taking HSL as an example, it is a representation of the points in the RGB color model in the cylindrical coordinate system. HSL is the color phase, Saturation, and brightness (English: Hue, Saturation, Lightness ).

For a color represented by HSL, we only need to change the L (brightness) value to obtain a brighter or darker color.

Of course, you can also change the brightness by adding a transparent layer. Here, you can use a pseudo element to change the button background color by adding a translucent layer.

Simply put, you can add a white translucent rgba (255,255,255,. 2) on the top of the background color to obtain a brighter color. (This sentence is not very rigorous. Assuming that the background of an element is pure white, the overlay of the white translucent layer will not be brighter)

Otherwise, you can add a black translucent rgba (0, 0, 0,. 2) on the top of the background color to obtain a darker color.

Therefore, we use the before pseudo element to generate a black translucent rgba (0, 0, 0 ,. 2) In. when btn: hover: before is displayed, a white translucent rgba (255,255,255 ,. 2) In. btn: active: before is displayed. You can configure only one background color for hover and active light and shade changes.

.pesudo:before{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(0,0,0,.1);}.pesudo:hover:before{  content:"";}.pesudo:after{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(255,255,255,.2);}.pesudo:active:after{  content:"";}

Stamp me to view the demo (Please open it in Chrome ).

Deformation recovery

Sometimes, designers want to express different meanings through some special geometric figures.

With the CSS3 transfrom attribute, we can easily obtain a trapezoid, diamond or parallelogram. Sometimes our designers want to include text in these containers. For example, a parallelogram can express a sense of speed.

As shown in, content and text are distorted along with CSS3 transformations. Generally, we use a p to perform background transformations, while text is placed in another p.

However, with pseudo elements, we can remove unnecessary non-semantic tags and use the before pseudo elements to apply the CSS3 transformation to the pseudo elements, so that the deformation will not apply to the text on p, no additional labels are used.

Stamp me to view the demo (Please open it in Chrome ).

Line feed with pseudo elements

As we all know, block-level elements will automatically wrap when they are not out of the normal layout stream, while row-level elements will not wrap automatically. However, in a project, the line-level elements need to be automatically wrapped. In this case, I usually use
Wrap labels. In css secret
The label description is that this method is not only a bad practice in terms of maintainability, but also contaminated the code of the structural layer. Think about what I used since I typed the code.
There are still many labels.

Using the after pseudo element, you can have a very elegant solution:

.inline-element::after{    content: "\A";    white-space: pre;}

Add the content as "\ A" value to the after pseudo element of the element. What is \ A here?

A Unicode Character represents a line break: 0x000A. In CSS, this character can be written as "\ 000A" or simplified to "\ ". Here we use it as the content of the: after pseudo element. That is, a linefeed is added at the end of the element.

The white-space: pre; retains the blank and line breaks behind the elements, and combines them to easily implement line breaks at the end of the element within the row.

Original Demo.

More magic-single-label Pattern

This section describes many usage of pseudo elements. It has two pseudo elements: before and after. A tag can actually be used as three tags. In combination with CSS3's powerful 3D transformation, multiple backgrounds, and multiple shadows, it makes painting with a single tag possible, below are some animation effects I achieved with only one tag:

Single-label browser icons:

Single-label weather icon:

CSS3 uses a single tag to complete various patterns-Demo (Please open it in Chrome. It is worth seeing ).

I also hope that some of my colleagues can click star: CSS3 on my Github.

I hope this article will be helpful to you, especially in the aspect of thinking about solving the problem.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.

If this article is helpful to you, click here for recommendations. It is not easy to write articles.