Detailed explanation of content attribute examples in CSS3

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

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

html:

## XML/HTMLCodeCopy content to clipboard

##<

1. h1>This is h1 h1>#<

2. h2

   >This is h2 h2>css

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

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 thestringNested 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

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; }

pictures

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

XML/HTML Code

##<

h3

1. >This is h3 h3>css:

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

   Copy after login
   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:

Copy content to clipboard

##<

1. href

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

   CSS Code

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

<

1. >

   Big title h1>##<p

>
2. Text

   p>##<h1

   >
Big Title
3. h1>##<p>
   Text

p>

4. <h1>大标题 h1>

5. <p>文字 p>

6. <h1>大标题 h1>

7. <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>文字1 p>

3. <p>文字2 p>

4. <p>文字3 p>

5. <h1>大标题 h1>

6. <p>文字1 p>

7. <p>文字2 p>

8. <p>文字3 p>

9. <h1>大标题 h1>

10. <p>文字1 p>

11. <p>文字2 p>

12. <p>文字3 p>

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!