Detailed explanation of content attribute examples in CSS3

This article mainly introduces the content attribute in CSS3Usage examples, which is the basic knowledge for getting started with CSS3. Friends who need it can refer to it

## There are four main pseudo-elements in #CSS:

before/after/first-letter/first-line. In the before/after pseudo- element selector, there is a content attribute, Able to insert content into the page.
Insert plain text

content: "Insert article", or content:none does not insert content

html:

## XML/HTML CodeCopy content to clipboard

##1c6a18281607a0481c158f9a1b02a428This is h12fedb0e0f552a6dfe8a779e7fe1b062c#4aa3bc3dec315dcde29a3d222c61651dThis is h2ca5d96bc14667a0a4ec2fc355c700175css

CSS Code

Copy content to clipboard

h1::after{   
    content:"h1后插入内容"
}   
h2::after{   
    content:none
}

Run result:jsfiddle.net/ dwqs/Lmm1r08x/

Embedded text symbols

You can use the open-quote attribute value and close-quote attribute value of the content attribute to add such as on both sides of the string Nested text symbols such as brackets, single quotes, and double quotes. open-quote is used to add the starting text symbol, and close-quote is used to add the ending text symbol. Modify the above css:

CSS Code

Copy the content to the clipboard

h1{   
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}   
h1::before{   
    content:open-quote;   
}   
h1::after{   
    content:close-quote;   
}   
h2{   
    quotes:"\"" "\"";  /*添加双引号要转义*/
}   
h2::before{   
    content:open-quote;   
}   
h2::after{   
    content:close-quote;   
}

Running result:jsfiddle.net/dwqs/p8e3qvv4 /

Insert

pictures

The content attribute can also insert pictures directly before/after the elementhtml:

XML/HTML Code

Copy content to clipboard

##0d82de2c22993ed21bbe10a6e4fc9bc6 This is h315c843d4ca5dd8197a781444497593efcss:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

Run results: jsfiddle.net/dwqs/c6qk6pkv/

Insert the attribute value of the element

The content attribute can directly use attr to obtain the attribute of the element and insert it into Corresponding location.
html:

XML/HTML Code

Copy content to clipboard

##1727eb46be1c43fee396ab0801c619f9This is the link 7d88b5e175a2356fe5ad98fb33713feacss:

CSS CodeCopy Content to clipboard

a:after{   
    content:attr(href);   
}

Run result:jsfiddle.net/dwqs/m220nzan/Insert item number

Use the counter of content The attribute appends consecutive numbers to multiple items.
html:
XML/HTML Code

Copy content to clipboard

315a1a8627bb07edc5c8fc84a4c3ed53

Big titlef210372c68b5a1bd7da0bac930c9784e##58338a1364ea78433d4e63f0c87e7d8e

Text

80c02203686204460272af76bfa727b9##762f81662c0ac05633533213f2439e12

Big Title

bf6a7d0e0883f8298566b5e87ac65c10

##b8a875f24d9d880522d34869b4bf20a8

Text930c85a670557cb5eb1f6cdce857ef53

eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

b1ba0ffe9712bc7808becc51b4a10ebd文字a7447e9e15348813b597b50fafc8734e

eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

b1ba0ffe9712bc7808becc51b4a10ebd文字a7447e9e15348813b597b50fafc8734e

css:

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my)'.';   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

h1:before{   
    content:'第'counter(my)'章';   
    color:red;   
    font-size:42px;   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

h1:before{   
    content:counter(my,upper-alpha);   
    color:red;   
    font-size:42px;   
}   
h1{   
    countercounter-increment:my;   
}

运行结果：
jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

1. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

2. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

3. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

4. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

5. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

6. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

7. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

8. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

9. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

10. b1ba0ffe9712bc7808becc51b4a10ebd文字1a7447e9e15348813b597b50fafc8734e

11. b1ba0ffe9712bc7808becc51b4a10ebd文字2a7447e9e15348813b597b50fafc8734e

12. b1ba0ffe9712bc7808becc51b4a10ebd文字3a7447e9e15348813b597b50fafc8734e

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h)'.';   
}   
h1{   
    countercounter-increment:h;   
}   
p::before{   
    content:counter(p)'.';   
    margin-left:40px;   
}   
p{   
    countercounter-increment:p;   
}

运行结果：
jsfiddle.net/dwqs/2k5qbz51/

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

h1{   
    countercounter-increment:h;   
    countercounter-reset:p;   
}

这样，编号就重置了，看看结果：
jsfiddle.net/dwqs/hfutu4Lq/

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

1. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

2. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

3. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

4. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

5. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

6. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

7. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

8. eec6deceef61d54e11dddd1b56159d7a大标题f210372c68b5a1bd7da0bac930c9784e

9. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

10. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

11. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

12. dc6e236874bee5b000bd91cb2cfd637f中标题14db48d7083e99a4b8242157f250cea9

13. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

14. 4556677bf7f4571029473e36db7bcd05小标题c887aa0aa5da001adc6255f711a597d3

css:

CSS Code复制内容到剪贴板

h1::before{   
    content:counter(h1)'.';   
}   
h1{   
    countercounter-increment:h1;   
    countercounter-reset:h2;   
}   
h2::before{   
    content:counter(h1) '-' counter(h2);   
}   
h2{   
    countercounter-increment:h2;   
    countercounter-reset:h3;   
    margin-left:40px;   
}   
h3::before{   
    content:counter(h1) '-' counter(h2) '-' counter(h3);   
}   
h3{   
    countercounter-increment:h3;   
    margin-left:80px;   
}

运行结果：
jsfiddle.net/dwqs/wuuckquy/

The above is the detailed content of Detailed explanation of content attribute examples in CSS3. For more information, please follow other related articles on the PHP Chinese website!