CSS3的content属性详解_html/css_WEB-ITnose

<h1 id="这是h">这是h1</h1><h2 id="这是h">这是h2</h2>

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

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

<h3 id="这是h">这是h3</h3>

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

<a href="http:///www.ido321.com">这是链接  </a>

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

<h1 id="大标题">大标题</h1><p>文字</p><h1 id="大标题">大标题</h1><p>文字</p><h1 id="大标题">大标题</h1><p>文字</p><h1 id="大标题">大标题</h1><p>文字</p>

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

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

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

<h1 id="大标题">大标题</h1><p>文字1</p><p>文字2</p><p>文字3</p><h1 id="大标题">大标题</h1><p>文字1</p><p>文字2</p><p>文字3</p><h1 id="大标题">大标题</h1><p>文字1</p><p>文字2</p><p>文字3</p>

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

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

<h1 id="大标题">大标题</h1><h2 id="中标题">中标题</h2><h3 id="小标题">小标题</h3><h3 id="小标题">小标题</h3><h2 id="中标题">中标题</h2><h3 id="小标题">小标题</h3><h3 id="小标题">小标题</h3><h1 id="大标题">大标题</h1><h2 id="中标题">中标题</h2><h3 id="小标题">小标题</h3><h3 id="小标题">小标题</h3><h2 id="中标题">中标题</h2><h3 id="小标题">小标题</h3><h3 id="小标题">小标题</h3>

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