The text starts from here, this article mainly talks about the various magical functions of pseudo-elements before and after.
The difference between :before and ::before
Before introducing specific usage, let's briefly introduce pseudo-classes and pseudo-elements. Everyone has heard a lot of pseudo-classes, and pseudo-elements may not be heard so frequently. In fact, CSS distinguishes the two.
Sometimes you will find that pseudo-class elements use two colons (::) instead of one colon (:). This is part of the CSS3 specification. The purpose is to distinguish between pseudo-classes and pseudo-elements. Most browsers support this Two ways of representation.
| 1 2 3 4 5 6 |
|
The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements. For pseudo-elements that already exist in CSS2, such as: before, the writing of single colon and double colon::before has the same effect.
Therefore, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon notation for pseudo-elements. If you have to be compatible with IE browser, it is safer to use CSS2 single colon notation.
For more specific information, you can look at MDN 's understanding of pseudo-classes and pseudo-elements .
The protagonists of this article are the pseudo-elements before and after. The charm of these two pseudo-elements will be discussed in detail below.
Which tags do not support pseudo elements? (Supplemented on 2016.06.28)
I just knew this posture too. In order not to mislead the readers, just add it quickly.
Although pseudo-elements are powerful, there are still some specific tags that do not support pseudo-elements before and after.
Such as <img>, <input>, <iframe>, these tags do not support the use of similar img::before.
The reason is that if you want tags to support pseudo-elements, you need this element to be able to insert content, that is to say, this element should be a container. However, input, img, iframe and other elements cannot contain other elements, so content cannot be inserted through pseudo elements.
Use after to clear float
This is estimated to be known to the front end, using the after pseudo-element to clear the page floating, without too much explanation.
| 1 2 |
|
Pseudo-elements and css sprites
This is also an old posture. You should not be unfamiliar with Sprite. By combining multiple icon icons into one image, in order to reduce http requests, many websites still have a great demand for Sprite.
However, in the process of making Sprite images, or the Sprite images automatically generated by many packaging tools now, there is a problem of how much margins need to be reserved for each icon. Take a look at the picture below:
--> 
For example, in the above situation (assuming that the icon in the button uses a Sprite image), one day the product suddenly requires the button to change from state left to state right, then the original margin of the Sprite image must be insufficient, leading to other graphics Appears in the button.
And we usually don't add an extra label for a small icon (not semantically).
So usually if you need to use the Sprite image in this situation, set a pseudo element in the button, set the height and width of the pseudo element to the size of the original icon, and then use absolute positioning to position it where you need it. The margins of an icon can be perfectly adapted.
A single color realizes the light and dark changes of the buttons hover and active
Recently, the project has such a requirement. According to different business scenarios, operations need to configure different background color values of a button. But we know that a button usually has 3 color values, normal state, hover state and active state. Usually hover is slightly brighter than the original color, and active is slightly darker.
It looks like this (picture below):
In order to reduce the burden of operating students, how to configure only one background color without configuring hover and active colors so that the buttons can adaptively follow changes. Yes, it can be done by using two pseudo-elements before and after.
Color knowledge
Here is a little knowledge about color values. In addition to #fff, rgb(255,255,255), as well as hsl(0, 100%, 100%) (HSV), the color notation we are familiar with.
Taking HSL as an example, it is a representation of the points in the RGB color model in a cylindrical coordinate system. HSL stands for Hue, Saturation, and Lightness (English: Hue, Saturation, Lightness).
For a color represented by HSL, we only need to change the value of L (luminance) to get a lighter or darker color.
Of course, changing the brightness can also be achieved by superimposing a transparent layer. Here, using pseudo elements to change the button background color is achieved by superimposing a semi-transparent layer.
Simply put, superimpose a white translucent layer rgba(255,255,255,.2) on top of the background color to get a brighter color. (This sentence is not very rigorous. Assuming that the background of an element is pure white, the white translucent layer will not be brighter)
Conversely, superimpose a black translucent layer rgba(0,0,0,.2) on top of the background color to get a darker color.
Therefore, we use the before pseudo-element to generate a black translucent layer rgba(0,0,0,.2) that is consistent with the size of the button, and display it at .btn:hover:before, and use the after pseudo-element to generate one that is the same size as the button The white semi-transparent layer rgba(255,255,255,.2) of, displayed in .btn:active:before, you can configure only one background color to realize the change of light and shade when hover and active.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
Poke me to see the demo (please open it with Chrome browser).
Deformation recovery
Sometimes, designers hope to express different meanings through some special geometric figures.
With the CSS3 transfrom property, we can easily get a trapezoid, diamond or parallelogram. Sometimes our designers hope to add text in these containers, such as parallelograms to express a sense of speed.
However, as shown in the figure above, the content text will also be distorted along with the CSS3 transformation. Usually we use a div as the background for transformation, and the text is placed in another div.
But by using pseudo-elements, we can remove these unsemantic and redundant tags, and use before pseudo-elements to apply CSS3 transformations to the pseudo-elements, so that the deformation will not affect the text on the div, and no redundant tags are used.
Poke me to see the demo (please open it with Chrome browser).
伪元素实现换行，替代<br>换行标签
大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用 <br/> 换行标签解决。而 《CSS SECRET》 中对 <br /> 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。 想想自己敲代码以来，用的 <br/> 标签还真不少。
运用 after 伪元素，可以有一种非常优雅的解决方案：
| 1 2 3 4 |
|
通过给元素的 after 伪元素添加 content 为 "\A" 的值。这里 \A 是什么呢？
有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 "\000A"， 或简化为 "\A"。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。
增强用户体验，使用伪元素实现增大点击热区
按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验，尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？
这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：
| 1 2 3 4 5 6 7 8 |
|
当然，在 PC 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：
more magic -- 单标签图案
The above is a part of the many uses of pseudo-elements, and the role of pseudo-elements is much more than that. There are two pseudo-elements before and after. One label can actually be used as 3 labels, and with CSS3's powerful 3D transformation, multiple backgrounds, multiple shadows and other means, it is possible to draw with a single label. Here are some animation effects I achieved with only a single label:
Single tab to realize the browser icon:
Single label weather icon:
CSS3 is a whimsical idea, using a single tab to complete various patterns-Demo (please open it with Chrome browser, it is worth a look).
I also hope that students who feel good will order a star on my Github: CSS3 Fantastic Ideas .
If you like, you can follow the interview applet
