CSS3.0 Instance Tutorial: Content Property Usage Example Introduction

Article Introduction: in the past, we can use the back-end server program to intercept or JS intercept text after the ellipsis can be added.

In the past, we can use the back-end server program to intercept or JS intercept text after the ellipsis can be added. Now, our CSS3.0 can be used to achieve!


Content Properties:
If we want to append an ellipsis to the paragraph p tag, we only need to define the style in the following way:
　　 p:after{content: "...";}

Of course, we can also append any text:
　　 p:after{content: "Front-End Development Network";}

Since CSS3 can append content after, CSS3 also provides us with a way to forward content before:
　　 p:before{content: "...";}

If we use the tag Selector to define all p, but there is a requirement that a p and the element with ID box are not allowed to automatically append or forward the content, Then we can set the None value for the content attribute (the None value can only be used for before and after these two selectors) or normal (any selector is OK) value:
　　 #box: before{Content:none;}


Summary:Content properties are mainly through pseudo-class selectors: Before and: After to specify the location;
The value of the content attribute can be anything;
When the value of the content property is None, no content is inserted;


now let's take a look at the comprehensive use of the content attribute:

<TITLE>CSS3 the content of the daily training-insert text!

"Original text"

"Original text"

"The original text, this will demonstrate the ellipsis"

"Original text"