CSS中的content属性使用教程

    display:block;      
    width:80px;      
    height:80px;      
    overflow:hidden;      
    }      
p:after{      
    content:“”;      
    display:block;      
    width:80px;      
    height:80px;      
    background-image:url(http://yeebing.u.qiniudn.com/wp-content/uploads/2013/11/Avatar_by_DeMoN8EyE-287×300.png);      
    background-size:80px 80px;      
    overflow:hidden;      
    }    

 
HTML元素属性
attr(x)函数将选择器对象的属性（包括自定义属性）作为字符串返回，如果为空则返回空字符串。X的大小写依赖于HTML的文档类型。本站文章的超链接就是使用到了这个函数
代码：
 

CSS Code复制内容到剪贴板

p:before{      
    content:attr(title)“:”;      
    }    

引号
open-quote和close-quote
这两个值被来自于quotes属性设置的字符替代
       
用法：
HTML

XML/HTML Code复制内容到剪贴板

<p lang=“en”>English</p>     
<p lang=“zh”>中文</p>    

 
CSS

CSS Code复制内容到剪贴板

p:lang(zh){quotes: “«” “»” “‹” “›” }      
p:lang(en){quotes: ’“‘ ’”‘ “‘” “‘” }      
p:before{      
    content:open-quote;      
    }      
p:after{      
    content:close-quote;      
    }    

 
注：元素要指定语言要使用lang属性
no-open-quote和no-close-quote
是不是对刚才quotes后面附加的“‘” “‘” 以及“<” “>”的用法有点疑惑呢？其实在其父元素上使用no-open-quote和no-close-quote就可以使用到后面那两个引号了。no-open-quote和no-close-quote旨在减少引号的嵌套，如下