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

 

posted on 2016-08-22 22:15  一抹橄榄  阅读(225)  评论(0编辑  收藏  举报