CSS 6: generating content

The text mainly shows the usage tips of CSS content and its related attributes:
•: Before AND: after pseudo elements
• Content Attributes
• Combination of CSS quotes and content Attributes
• Counters

For more information, see CSS content, counter-increment, and counter-reset.

1. Insert the Generated Content

Using the before and after pseudo elements combined with the content attribute, you can insert content before or after any element on the page, such as the following statement, you can add the string "(link)" before the link with the href attribute )":

a[href]:before { content: "(link)"; }

The style of the generated content inherits the style associated with the element, unless you add an additional style to it. For example, to make the color of the inserted string gray, write the style as follows:

a[href]:before { content: "(link)"; color: gray; }

:

2. specified content (content attribute)

The CSS content attribute can include the following values: attr (alt) | counter (name, list-style-type) | counters (name, string) | counters (name, string, list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url (url)

It is used together with the: after and: before pseudo elements to display the content before or after the object.

Note that the string value is output as is, for example, the following rule:

h2:before { content: "<em>¶</em>"; color: gray; }

The following results are generated:

The string value of the content attribute should include any non-ASCII character set or entity, declare the character in CSS and XHTML, and/or use ISO encoding for the character (for example: "\ 00a3 ″)., See http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/ for details

Insert property value:

The attr value can be used to insert alt text, class or id values, and any attributes. For example, the following rules can be used to insert the URL of a hyperlink without using js:

a:hover:after { background-color: #008000;content: attr(href);color: #FFF;font-size: .8em;line-height: 1.2em;position: absolute;top: -1.2em;left: 0;}

View Demo

3. Generate quotation marks

CSS quotes attribute values include: [<string>] | none | inherit
String: Nested Tag definition enclosed in quotation marks. The two are in one group. The first string is pre-defined (for example, "<"), and the second string is post-defined (for example, "> "). Use an empty lattice to separate groups. The depth of nested labels is pushed in the defined order;

None: The open-quote and close-quote values of the content attribute will not generate any Nested Tag;

Inherit: Depends on the specific user agent.

You can use the open-quotes value, close-quotes value, and quotes attribute of the content attribute to manage quotation marks. It is generally to define quotation marks in the content attribute, and then use the quotes attribute to control the "on" and "off" of the quotation marks, such as the following HTML structure:

<Div class = "text"> <dl> <dt> four famous books in China </dt> <dd> Romance of the Three Kingdoms </dd> <address> Luo Guanzhong </address> <br/> <dd> Water Margin </dd> <address> Shi Nai Quan </address> <br/> <dd> travel to the West </dd> <address> Wu chengen </address> <br/> <dd> Dream of Red Mansions </dd> <address> CAO Xueqin </address> <br/> </dl> </div>

Style:

.text dd, .text address { quotes: "\300A" "\300B"; display: inline; }.text dd:before { content: open-quote; }.text dd:after { content: close-quote; }dd + address:before { content: "（"; display: inline; }dd + address:after { content: "）"; display: inline; }

The book name is added before and after the masterpiece, and brackets are added before and after the left.

However, there is a big difference in browser resolution when multiple layers are nested, such as the following structure:

<blockquote>In the begining,there was nothing.And God said:<q>Let there be ligth!</q>And there was still nothing,but you could see it.</blockquote>

The style is as follows:

blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }blockquote:before { content: open-quote; }blockquote:after { content: close-quote; }blockquote q:before { content: open-quote; }blockquote q:after { content: close-quote; }

Safari 5 is not displayed normally, blockquote is not enclosed by quotation marks, and q is enclosed by double quotation marks.

View Demo

4. counters

The counter-reset and counter-increment attributes of CSS include: [<string>] | none | inherit

Counter-reset sets the start point of the counter. counter-increment can increase it by a certain amount.

Assume that the following HTML structure is available:

Use a counter to add the required list items before the title:
H1 {counter-increment: chapter;/* Add a counter before each h1 */counter-reset: section subsec; /* and re-set the h2 counter after each h1 */} h1: before {content: counter (chapter )". ";} h2 {counter-increment: section;/* Add a counter before each h2 */counter-reset: subsec; /* and re-set the h3 counter after each h2 */} h2: before {content: counter (chapter )". "counter (section )". ";}h3 {counter-increment: subsec;/* Add a counter before each h3 */} h3: before {content: counter (chapter )". "counter (section )". "counter (subsec )". ";}
You can generate a directory-like structure and view the Demo
In addition, you can change the default value of the counter to display the list items in a mix of uppercase and lowercase letters and numbers:
H1 {counter-increment: chapter;/* Add a counter before each h1 */counter-reset: section 0 subsec; /* and re-set the h2 counter after each h1 * // * if no integer is specified for the "identifier-integer" pair, the default value is 0 (counter-increment attribute is 1), and the value can be negative */} h1: before {content: counter (chapter, upper-alpha )". ";/* No keyword is specified for the counter. The default value is the decimal count style. */} H2 {counter-increment: section;/* Add a counter before each h2 */counter-reset: subsec; /* re-set the h3 counter after each h2 */} h2: before {content: counter (chapter, upper-alpha )". "counter (section )". ";}h3 {counter-increment: subsec;/* Add a counter before each h3 */} h3: before {content: counter (chapter, upper-alpha )". "counter (section )". "counter (subsec, lower-roman )". ";}
View Demo
For nested complex HTML structures, if you use counters, you can use the counters value of content, as shown below:
Code

 <Ol style = "counter-reset: ordered-1;/* starts an ordered list entry from 1 */">
<Li> <a href = "#" title = "Preface"> preface </a> </li>
<Li> Chapter 2
<Ol>
<Li> <a href = "#" title = "section 1.1"> section 1.1 </a> </li>
<Li> <a href = "#" title = "section 1.2"> section 1.2 </a>
<Ol>
<Li> <a href = "#" title = "section 1.2.1"> section 1.2.1 </a> </li>
<Li> <a href = "#" title = "section 1.2.2"> section 1.2.2 </a> </li>
<Li> <a href = "#" title = "section 1.2.3"> section 1.2.3 </a> </li>
</Ol>
</Li>
<Li> <a href = "#" title = "section 1.3"> section 1.3 </a> </li>
</Ol>
</Li>
<Li> Chapter 2
<Ol>
<Li> <a href = "#" title = "section 2.1"> section 2.1 </a> </li>
<Li> <a href = "#" title = "section 2.2"> section 2.2 </a> </li>
<Li> <a href = "#" title = "section 2.3"> section 2.3 </a> </li>
</Ol>
</Li>
<Li> Chapter 2
<Ol>
<Li> <a href = "#" title = "section 3.1"> section 3.1 </a> </li>
<Li> <a href = "#" title = "section 3.2"> section 3.2 </a> </li>
<Li> <a href = "#" title = "section 3.3"> section 3.3 </a> </li>
</Ol>
</Li>
</Ol>
You only need to add the following style to automatically add the list items:
Ol {counter-reset: ordered; margin-left: 2em; list-style-type: none;} ol li: before {counter-increment: ordered; content: counters (ordered, ". ")"-";/* content: counters (ordered ,". ", lower-alpha)"-"; the list items Use lowercase letters */}
View Demo
For more information about the use of CSS content, see CSS content generation technology and applications.
(Full text)