CSS3中的content屬性使用示例

CSS中主要的偽元素有四個(gè):before/after/first-letter/first-line,在before/after偽元素選擇器中,有一個(gè)content屬性,能夠?qū)崿F(xiàn)頁(yè)面中的內(nèi)容插入。
插入純文字
content:"插入的文章",或者content:none不插入內(nèi)容
html:
- <h1>這是h1</h1>
- <h2>這是h2</h2>
css
- h1::after{
- content:"h1后插入內(nèi)容"
- }
- h2::after{
- content:none
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/Lmm1r08x/
嵌入文字符號(hào)
可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號(hào)、單引號(hào)、雙引號(hào)之類(lèi)的嵌套文字符號(hào)。open-quote用于添加開(kāi)始的文字符號(hào),close-quote用于添加結(jié)束的文字符號(hào)。修改上述的css:
- h1{
- quotes:"(" ")"; /*利用元素的quotes屬性指定文字符號(hào)*/
- }
- h1::before{
- content:open-quote;
- }
- h1::after{
- content:close-quote;
- }
- h2{
- quotes:"\"" "\""; /*添加雙引號(hào)要轉(zhuǎn)義*/
- }
- h2::before{
- content:open-quote;
- }
- h2::after{
- content:close-quote;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/p8e3qvv4/
插入圖片
content屬性也可以直接在元素前/后插入圖片
html:
- <h3>這是h3</h3>
css:
h3::after{
content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/c6qk6pkv/
插入元素的屬性值
content屬性可以直接利用attr獲取元素的屬性,將其插入到對(duì)應(yīng)位置。
html:
- <a href="http:///www.ido321.com">這是鏈接 </a>
css:
- a:after{
- content:attr(href);
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/m220nzan/
插入項(xiàng)目編號(hào)
利用content的counter屬性針對(duì)多個(gè)項(xiàng)目追加連續(xù)編號(hào).
html:
- <h1>大標(biāo)題</h1>
- <p>文字</p>
- <h1>大標(biāo)題</h1>
- <p>文字</p>
- <h1>大標(biāo)題</h1>
- <p>文字</p>
- <h1>大標(biāo)題</h1>
- <p>文字</p>
css:
- h1:before{
- content:counter(my)'.';
- }
- h1{
- countercounter-increment:my;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/2ueLg3uj/
項(xiàng)目編號(hào)修飾
默認(rèn)插入的項(xiàng)目編號(hào)是數(shù)字型的,1,2,3.。。。自動(dòng)遞增,也能給項(xiàng)目編號(hào)追加文字和樣式,依舊利用上面的html,css修改如下:
- h1:before{
- content:'第'counter(my)'章';
- color:red;
- font-size:42px;
- }
- h1{
- countercounter-increment:my;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/17hqznca/
指定編號(hào)種類(lèi)
利用content(計(jì)數(shù)器名,編號(hào)種類(lèi))格式的語(yǔ)法指定編號(hào)種類(lèi),編號(hào)種類(lèi)的參考可以依據(jù)ul的list-style-type屬性值。利用上述的html,css修改如下:
- h1:before{
- content:counter(my,upper-alpha);
- color:red;
- font-size:42px;
- }
- h1{
- countercounter-increment:my;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/4nsrtxup/
編號(hào)嵌套
大編號(hào)中嵌套中編號(hào),中編號(hào)中嵌套小編號(hào)。
html:
- <h1>大標(biāo)題</h1>
- <p>文字1</p>
- <p>文字2</p>
- <p>文字3</p>
- <h1>大標(biāo)題</h1>
- <p>文字1</p>
- <p>文字2</p>
- <p>文字3</p>
- <h1>大標(biāo)題</h1>
- <p>文字1</p>
- <p>文字2</p>
- <p>文字3</p>
css:
- h1::before{
- content:counter(h)'.';
- }
- h1{
- countercounter-increment:h;
- }
- p::before{
- content:counter(p)'.';
- margin-left:40px;
- }
- p{
- countercounter-increment:p;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/2k5qbz51/
在示例的輸出中可以發(fā)現(xiàn),p的編號(hào)是連續(xù)的。如果對(duì)于每一個(gè)h1后的三個(gè)p重新編號(hào)的話,可以使用counter-reset屬性重置,修改上述h1的css:
- h1{
- countercounter-increment:h;
- countercounter-reset:p;
- }
這樣,編號(hào)就重置了,看看結(jié)果:
https://jsfiddle.net/dwqs/hfutu4Lq/
還可以實(shí)現(xiàn)更復(fù)雜的嵌套,例如三層嵌套。
html:
- <h1>大標(biāo)題</h1>
- <h2>中標(biāo)題</h2>
- <h3>小標(biāo)題</h3>
- <h3>小標(biāo)題</h3>
- <h2>中標(biāo)題</h2>
- <h3>小標(biāo)題</h3>
- <h3>小標(biāo)題</h3>
- <h1>大標(biāo)題</h1>
- <h2>中標(biāo)題</h2>
- <h3>小標(biāo)題</h3>
- <h3>小標(biāo)題</h3>
- <h2>中標(biāo)題</h2>
- <h3>小標(biāo)題</h3>
- <h3>小標(biāo)題</h3>
css:
- 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;
- }
運(yùn)行結(jié)果:
https://jsfiddle.net/dwqs/wuuckquy/
相關(guān)文章
CSS3彈性布局內(nèi)容對(duì)齊(justify-content)屬性使用詳解
這篇文章主要介紹了CSS3彈性布局內(nèi)容對(duì)齊(justify-content)屬性使用詳解,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-31淺談html特殊字符 編碼css3 content:"我是特殊符號(hào)"
下面小編就為大家?guī)?lái)一篇淺談html特殊字符 編碼css3 content:"我是特殊符號(hào)"。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09CSS3的 fit-content實(shí)現(xiàn)水平居中
今天通過(guò)本文給大家介紹一個(gè)fit-content屬性的相關(guān)知識(shí),CSS屬性是用來(lái)水平居中的,fit-content是CSS3中給width屬性新加的一個(gè)屬性值,它配合margin可以讓我們輕松的實(shí)現(xiàn)水2017-09-07