做有态度的前端团队

网易FEG前端团队

CSS3的content属性1

CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。
1、插入纯文字
html:

<h1>这是h1</h1>
<h2>这是h2</h2>

css:

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

效果图:
1.png

2、嵌入文字符号
可以使用content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote 用于添加开始的文字符号,close-quote 用于添加结束的文字符号。修改上述的css:

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

效果图:
2.png

3、插入图片
html:

<h3>这是h3</h3>

css:

h3::after{
    content:url(http://webinput.nie.netease.com/img/tx3/logo.png)
}

4、插入元素的属性值
html:

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

css:

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

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif