The magical effect of "CSS advanced" pseudo-elements 2-Multi-column uniform layout and Title property effects

Recently, whether it is work or self-learning is very busy, the face of long-winded blog is always weak, but also constantly contact learning to fragmented but very meaningful knowledge points, very want to share to everyone, so this article may be very short.

This article is another article about CSS pseudo-elements: "CSS advanced" pseudo-elements of the magic-the beauty of the single label, after reading this article found it interesting to see the previous article, sharing some pseudo-elements of the magical.

The text starts here:

which tags do not support pseudo-elements?

I know this posture too. In order not to mislead the reader, please hasten to add.

Although pseudo elements are powerful, there are still some specific tags that do not support pseudo-elements before and after.

such as,, <input\> <iframe\> , these several tags are not supported similar to img::before use.

The reason is that to want the tag to support pseudo-elements, this element needs to be inserted into the content, that is, the element is a container. Elements such as Input,img,iframe cannot contain other elements, so it is not possible to insert content through pseudo-elements.

Pure CSS implements the Title property hover effect

As we all know, there is an attribute in the HTML tag –title, which specifies the additional information about the element, that is, we can fill in the title of a piece of text, the mouse pointer over the element will be displayed when the text.

It's like that <element title="value" > . The effect is as follows:

;

But this hover box has two minor problems:

• Response is too slow, usually the mouse hover up to around 1s to appear this title box

• Box body structure cannot be customized, popup style cannot be customized

Well, usually to solve the above method, or we need a mouse hover up when the effect of a cue layer will not take the title property, but with the use of JS to simulate a pop-up layer.

Here is a pure CSS scheme can solve this scenario, the use of pseudo-elements, first on the Demo:

Mouse hover text, found that the pop-up layer response is very fast (because it is the CSS hover, no delay). And the style of the pop-up layer here can also be completely customized, no use of JS code, and look at the HTML code can see no need for extra tags.

How did that come about? The main use of pseudo-element content properties, content usually used to insert content in a pseudo-element. And there's a syntax content: attr(value) like this, you can read the properties of the corresponding HTML tag value . That is

1. Suppose an HTML tag is defined as:<div data-msg="ABC">

2. Then the pseudo-class of the Div, if set content:attr(data-msg) , can read the value of the data-msg, which is equivalent tocontent:"ABC"

And the frame is generated by pseudo-class, so we can customize its style and position, using this effect, we can use it in many places where information cannot be displayed properly.

Using pseudo-elements to realize multi-column uniform layout

We often need to achieve multi-column uniform layout, can adapt to various situations, as follows:

On the mobile side we can use the flex layout, but on the PC side if you want to be compatible with ie6+, you usually need some extra tags to control the last element or work with JS.

We know that there is an text-align:justify effect that can be justified on both ends, and at first I guess it can be achieved by using it:

Try it is not possible, and did not achieve the so-called two-pronged, find the reason, found in the discovery of such an explanation:

The last horizontal alignment property is justify, which brings some of its own problems. The CSS does not describe how to handle hyphens, because different languages have different hyphenation rules. The spec did not attempt to reconcile some of the most likely imperfect rules, but simply not to mention the problem.

Well, I read the above a large paragraph of explanation or did not understand the above meaning, and then continue to verify, only to find the reason:

Although the Text-align:justify property is fully compatible, to use it for justification, it is important to note that adding [space/Line breaks/tabs] between modules will work.

This means that each <i>1</i> gap requires at least one space or a newline or a tab.

I tried to add a newline character to each piece, and found that it was still not working:

Looking again for the reason, is out of the last element above, and then I found text-align-last this property, the Text-align-last property specifies how to align the last line of the word, and the Text-align-last property is set only in the Text-align property to "justify "is not working.

Try to add to the container text-align-last:justify and find that it is finally possible to have a multi-column uniform layout:

But a look at compatibility, miserable, only IE and the latest Chrome support text-align-last properties, that is, if you are not using IE or the latest version of Chrome to watch this article, the above Codepen example is not evenly distributed.

Good, foreshadowing for so long, finally can lead to the protagonist of this article pseudo-elements, above said to use the text-align:justify implementation of multi-column layout, to cooperate text-align-last , but its compatibility is not good, really no way, in fact, there are some, using pseudo-elements, can be perfectly implemented:

By giving the pseudo-element: After settings inline-block , text-align: justify a multi-column uniform layout can be easily implemented with the container. With a few sentences hack code, you can achieve compatibility to ie6+, the most important is the code is not long, very good understanding.

Finally this method is also recently learned, referring to this article, very well worth reading:

• Don't think about it, it's just a two-pronged alignment.

This paper mainly introduces two kinds of practical methods of pseudo-elements, and more pseudo-elements can be used to stamp
CSS3, using a single label to complete a variety of patterns –demo (please open with Chrome browser, it is worth a look).

Another article about CSS pseudo-elements: "CSS advanced" pseudo-elements of the magic-the beauty of a single label, after reading this article think it is interesting to see the previous article.

Also want to feel good classmate handy in my Github point a star:css3 odd thought.

I hope this article will help you, especially on the thinking level of problem solving.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

The magical effect of "CSS advanced" pseudo-elements 2-Multi-column uniform layout and Title property effects