Detailed CSS Content properties

In front-end development, CSS is the language we are bound to use, this article we mainly learn the content properties together with you. The content property of CSS needs to be used in:: Before and:: After pseudo-class elements. Properties generate content on the page, which, of course, requires your browser to support this property.

The basic syntax for the content property.

The content property is represented as follows, and the value of each property is listed here.

P::before {  Content:normal|counter|attr|string|open-quote|url|initial|inherit;}

This is slightly different from the CSS, for example, in: Before or:: After using attr (), you need to write the following code:

P::after {  content: "(" attr (title) ")";}

Here is just one example, more in the back. Below we will discuss each of the values, including attr ().

Value: None or Normal

When set to none, this pseudo-element is not generated. If set to normal, he will calculate to none.

P::before {  content:normal;} p::after {  content:none;}

This kind of thing may be used in nested elements, they already have a pseudo-element definition, but in some cases you want to overwrite them.

Value: <string>

The content can be set to a string, with any character contents. If you use a character other than Latin, it must be encoded. We look at the following to take care of themselves, consider this HTML.

Here is the CSS code:

. new::after {  content: "new!";  Color:green;}. Copyright::before {  content: "\00a9  ";}
This inserts a text content in the list item, and also inserts an encoded character in the P tag.

A string must be enclosed in single or double quotation marks.

Value: <uri>

If you want to display some media files, <uri> can come in handy. You can point to an external resource (compared to a slice). If some resources or images do not appear, he ignores or has a placeholder. Then look at the code below and how to use them.

Html:

<a class= "sp" href= "http://www.sitepoint.com/" >SitePoint</a>
Css:

. sp::before {  content:url (Http://www.sitepoint.com/favicon.ico);}
Value: Counter () or counters ()

This value is mostly used for composite values. He can be one of two different functions--counter () or counters ().

Let's look at counter in one example:


Css:

. planets {  counter-increment:planetindex;}. Planets::before {  content:counter (planetindex) ".";}
This number will be displayed in the P tab. Similar to a sorted list. In this example, we can simply use a sorted list. Here we do not explain in detail. Later I will write a detailed article to explain these two functions.

Value: attr ()

In the literal sense, the attr function is to insert a specified property value, and he has only one parameter. Returns a null character if the element has no attributes.

Here's an example:

<ul>  <li><a href= "http://www.sitepoint.com/html-css/" >html and Css</a></li>  <li><a href= "Http://www.sitepoint.com/javascript" >JavaScript</a></li>  <li ><a href= "http://www.sitepoint.com/mobile/" >Mobile</a></li></ul>
Through the above HTML, in conjunction with the following CSS properties set to href, this time after the link text will be added to his own link text.

A::after {  content: "(" attr (HREF) ")";}
Value: Open-quote or Close-quote

When we set this value, the content property generates a quotation mark. It is usually used with the <q> tag element. But you can use it on any element. So you can do something about it, like this:

Blockquote::before {  content:open-quote;} blockquote::after {  content:close-quote;}
This close-quote value is only valid in: After pseudo-element, if the value open-quote is not set on the same element as the pseudo-element:: Before, he will not have any effect.

Value: No-open-quote or No-close-quote

The No-open-quote value removes the opening quotation marks, no-close-quote the closing quotation marks. You may be very interested to know what their use is. Look at the following HTML code:

<p>    <q>a wise man once said:       <q>        bes true to yourself, but don ' t listen to those who say         <q>          Don ' t being true to yourself.        </q>      </q> is       good advice.    </q></p>
Noting the above paragraph, the speaker introduced ("A wise man ...") speaker, in turn, introduced another speaker ("Those who say ..."). So we introduced a three-time nesting. Syntactically speaking, this is the right way to deal with it. If you want to use the generated content, we have to make sure that the nesting is introduced correctly:

Q {quotes: ' "'" ' "'" '  " Q::before {   content:open-quote;} q::after {  content:close-quote;}
The first selector defines some of the quotes we want to use. Use the Quotes property to set three values. Then we insert quotation marks as content. This is similar to the one mentioned in the previous section.

But what if we want the second quote to be ignored or not inserted? We can use No-open-quote and no-close-quote values to cover them.

. noquotes::before {  content:no-open-quote;}. noquotes::after {  content:no-close-quote;}
The second one does not need quotation marks, add the second Q to class = "noquotes". This completes the result we want.

The above is the CSS content properties detailed introduction, hope to help everyone.