#学习记录#——CSS content 属性
CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面。
1. 添加文本内容
html:
<h1>给末尾添加内容。 </h1> <h2>给末尾不添加内容。 </h2>
css:
<style> h1::after{ content: " hello world!!" } h2::after{ content: none } </style>
所要添加的内容用双引号引起来,若不添加内容可使用 属性none
2. 在元素前/后添加图片,url里是图片的路径
CSS:
<style> h1:: before{
content:url("images/a.jpg");
} </style>
不过插入的图片不能修改大小
3. 给元素添加属性值,直接利用attr获取元素的属性,将其插入到对应位置。
<style> a:: after{ content:attr(href) } </style> <body> <a href="http://www.cnblogs.com/olive987/">我的博客</a> <body>