How to use selectors to insert required content into the page in css3 (code attached)

The content of this article is about how to use CSS3 selectors to insert the required content into the page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1 Use a selector to insert content

Use the after or before selector to define the content to be inserted in the content attribute of the selector. When the inserted content is text When inserting text, you must add single or double quotes on both sides of the inserted text.

<style type="text/css">
h2:before{  content：‘COLUMN’；}
</style>

2 Specify individual elements not to be inserted

Use the none attribute value of the content attribute

<style type="text/css">
h2.sample:before{  content：none；}
</style>

3 Insert image files

<style type="text/css">
h2:before{  content：url(mark.png)；}
</style>

4 Display the value of the alt attribute as the title of the image

By specifying the form of "attr (attribute name)" in the content attribute, you can The attribute values ​​of each attribute are displayed.

img:after{
content:attr(alt);
display:block;
text-align:center;
}

5 Use the content attribute to insert the item number

(1) Add consecutive numbers before multiple titles

1. In the content attribute Use the counter attribute value to append consecutive numbers to multiple items

558dc77cf99fee6757323747f07fa144: before{ content: counter (counter name);} (Use a counter to calculate the number, and the counter can be named arbitrarily)

2. You also need to add the specification of the counter-increment attribute of the element in the element's style. In order to use continuous numbering, you need to set the attribute value of the counter-increment attribute to the before selector or after selector. The counter name specified in the counter attribute value.

558dc77cf99fee6757323747f07fa144{ counter-increment: the counter name specified in the before selector or after selector}

h1：before｛content：counter（mycounter）；｝
h1｛counter-increment：mycounter；｝//1、2、3.......

(2) Append text to the item number

h1：before｛content：‘第’counter（mycounter）‘章’；｝//第1章大标题、第2章大标题.........

(3) Specify the type of number

1. Using the content attribute of the before selector or after selector, you can add not only numeric numbers, but also alphabetical numbers or Roman numeral numbers.

content: counter (counter name, numbering type)

2. You can use the value of the list-style-type attribute to specify the numbering type. For example, when numbering in uppercase letters, use "upper- alpha" attribute, use the "upper-roman" attribute when specifying uppercase Roman letters.

h1：before｛content：counter（mycounter，upper-alpha）‘.’；｝// A.、B.、C.、

(4) Number nesting

h1：before｛content：counter（mycounter）；｝//1（1、2、3...）、2（1、2、3...）、........
h1｛counter-increment：mycounter；counter-reset:subcounter;｝(将中编号进行重置)
h2：before｛content：counter（subcounter）；｝
h2｛counter-increment：subcounter；margin-left:40px｝

(5) Embed large numbers in middle numbers

h2：before｛content：counter（mycounter）‘-’ counter（subcounter）‘.’；｝//1-1、1-2

(6) Add nested text symbols on both sides of the string

1. You can use the open-quote attribute value and close-quote attribute value of the content attribute to add nested text symbols such as brackets, single quotes, and double quotes on both sides of the string.

2. The open-quote attribute value is used to add the beginning of the nested text symbol, and the close-quote attribute value is used to add the end of the nested text symbol.

3. Use the quotes attribute in the style of the element to specify what nested text symbols to use

h1:before{  content:open-quote; }
h1:after { content:close-quote; }
h1{   quotes:"(" ")"   }//形如:   （标题）

Related recommendations:

CSS3 Series 1 (Overview, Selection , use selectors to insert content)_html/css_WEB-ITnose

How to insert content into the page in css3

The above is the detailed content of How to use selectors to insert required content into the page in css3 (code attached). For more information, please follow other related articles on the PHP Chinese website!