#学习记录#——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>