Application of pseudo-element content

Reprint: http://www.alloyteam.com/2015/10/usage-of-content-attibute-of-pseudo-elements/?hmsr=toutiao.io&bsh_bid= 941713865

In daily development, we often use: Before,:after to achieve some effects, such as

– Border

– Icon

The content in this case is declared only for pseudo-elements to render.

123	div:before{content: "";}

In fact, the content property supports not only strings, but also some built-in CSS methods.

The use of content: attr(arribute-name) "communication" between HTML and CSS allows pseudo-elements to read the properties of the current element. See the following example

In the diagram, to achieve automatic truncation of multiple lines of text, however, the design also added a small arrow at the end of the third line, there is no way to use the simple rough flex-box -webkit-line-clamp:3 to fix.

This effect is achieved by replying to a scenario in which the trailing line of text is left blank for truncation processing.
Then you can use pseudo-elements. In the implementation, before and after both get text through the content, before show the first two lines, and after through padding-right with text-indent the match, to the arrows vacated a vacancy.

Of course, this is only a attr application scenario, you can also use the content to implement a custom tooltip and so on.

The Content property also supports URL methods for embedding pictures

1	Content:url ('./image.png ');

But the controllability is not background-image high, so the actual scene is less used.

As well as the counter method to achieve self-increment, here does not add more narrative.

Reference article: A scenario where a trailing line of text is left blank for truncation processing

Application of pseudo-element content