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

##

h1>This is h1h1>

#
1. h2

   >This is h2h2>css

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

##

h3

1. > This is h3h3>css:

   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

##

a

1. href

   ="http:///www.ido321.com">This is the link a>css:

   CSS Code

Copy 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

h1

1. >

   Big titleh1>##p

>
2. Text

   p>##h1

   >
Big Title

3. h1>##p >

   Text

4. p>

5. h1>大标题h1>

6. p>文字p>

7. h1>大标题h1>

8. p>文字p>

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. h1>大标题h1>

2. p>文字1p>

3. p>文字2p>

4. p>文字3p>

5. h1>大标题h1>

6. p>文字1p>

7. p>文字2p>

8. p>文字3p>

9. h1>大标题h1>

10. p>文字1p>

11. p>文字2p>

12. p>文字3p>

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. h1>大标题h1>

2. h2>中标题h2>

3. h3>小标题h3>

4. h3>小标题h3>

5. h2>中标题h2>

6. h3>小标题h3>

7. h3>小标题h3>

8. h1>大标题h1>

9. h2>中标题h2>

10. h3>小标题h3>

11. h3>小标题h3>

12. h2>中标题h2>

13. h3>小标题h3>

14. h3>小标题h3>

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!