Things You Don’t Know About the CSS ::before and ::after Pseudo-Elements

CSS has two pseudo-classes that are not commonly used: before and :after. They are occasionally used to add some custom formatting, but their functions are not limited to this. A few days ago, I found Creative Link Effects, a very interesting page that introduces creative link effects. The amazing effects in it use a lot of features, in addition to the transform attribute for deformation, the two pseudo-elements that I will introduce next.

Creative Button Styles

A basic grammar

Before understanding advanced applications, let's first understand the grammar rules. Normally, when you only need to use these two pseudo-elements to add some custom characters, just use the single colon notation used by pseudo-classes to ensure browser compatibility:

However, in CSS3, double colons are used to distinguish pseudo-elements from pseudo-classes. Therefore, if attributes such as display or width are used so that the display is separated from the original element, it is recommended to write them in double colons according to the standard. Old browsers may have support issues, but pseudo-elements are mostly used with CSS3, so backward compatibility is not a big deal:

The content attribute unique to these two pseudo-classes is used to add content to the logical head or tail of the element in CSS rendering. Note that these additions do not change the document content, do not appear in the DOM, are not replicable, and are only added to the CSS rendering layer. The following values ​​are more useful:

•[String] - Enclosing a string in quotes will add the string to the element content. Example:

Second advanced skills

Clearing floats is a problem that is often encountered. Many people's solution is to add an empty div and apply the clear:both; attribute. Now, instead of adding meaningless elements, all you need is the following styles to automatically clear the float at the end of the element:

Many people like to add huge quotation marks as the background of the blockquote. In this case, we can use :before instead of background, which can leave space for the background and use text instead of images:

Three special effects

In addition to simply adding characters, with the powerful positioning and special effects features of CSS, it is entirely possible to add up to two containers to simple elements. One thing to note is that if you don’t need the content and only want to use the style attribute to produce an effect, the content attribute cannot be empty, that is, content:””. Otherwise, other style attributes will not take effect.

Square brackets appear when hovering

Move the mouse over the link and square brackets will appear:

Similarly, we only need to use display: block and position: absolute to treat it as two containers and combine them to create a double-border effect when suspended:

The above article about the unknown usage of CSS ::before and ::after pseudo-elements is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/androidshouce/archive/2016/06/12/5576493.html