#学习记录#——CSS content 属性

时间：2021-11-09 06:00:25

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>

相关文章