likes
comments
collection
share

css 的content是什么，有什么作用？

作者站长头像
站长
· 阅读数 14

1.content是什么？

定义：content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。

属性：

css 的content是什么，有什么作用？

2.content有什么作用？

  1. content属性与:before及:after伪元素配合使用生成文本内
  2. 嵌入文字符号
  3. 插入图片
  4. 插入元素的属性值
  5. 插入项目编号
  6. 项目编号修饰
  7. 指定编号种类

3. 实例讲解

3.1 插入纯文字

通过before及:after伪元素，设置content属性为插入文本内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    font-size: 16px;
}

div p::after{
    content: "后面插入文本";
    font-size: 12px;
    color: red;
}
div p::before{
    content: "前面插入文本";
    font-size: 12px;
    color: green;
}
</style>
<body>
    <div class="txt">
      <p>插入纯文字</p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.2 嵌入文字符号

通过quotes配合content实现不同的符号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  赖个都是爱情！</title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    font-size: 16px;
}
.gay{
    quotes:"'" "!'" ;
}
.girl{
    quotes:'“' '！”' ;
}
div p::before{
    content: open-quote;
    font-size: 12px;
    color: red;
}
div p::after{
    content: close-quote;
    font-size: 12px;
    color: green;
}
</style>
<body>
    <div>
      <p class="gay">我爱你，宝贝</p>
      <p class="girl">爱我就打钱</p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.3 插入图片

ps：content设置图片无法调整大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  迪丽热巴 古娜娜扎 玛尔扎哈</title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    font-size: 16px;
}
div p::before{
   
    font-size: 12px;
    color: red;
}
div p::after{
    content: url("./WechatIMG293.png") ;
    font-size: 12px;
    color: green;
}
</style>
<body>
    <div>
        <p>玛尔扎哈yyds</p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.4插入元素的属性值

通过attr获取到元素的属性值插入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  迪丽热巴 古娜娜扎 玛尔扎哈</title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    font-size: 16px;
}
div p::before{
   
    font-size: 12px;
    color: red;
}
div p[data-line]::after{
    content:"(" attr(data-line) ")";
    font-size: 12px;
    color: green;
}
</style>
<body>
    <div>
        <p data-line="我是p标签的属性值"></p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.5插入项目编号

通过设置counter， counter-reset实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    counter-reset: number 1;
}
div p::before{
    content: counter(number)'. ';
    color: green;
}
</style>
<body>
    <div>
        <p>编号一</p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.6项目编号修饰

通过设置counter， counter-increment实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    counter-increment: number 1;
}
div p::after{
    content:'第:'counter(number)'节';
    color: green;
}
</style>
<body>
    <div>
        <p>第三章 <br /></p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

3.7 指定编号种类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>

<style>
div{
    padding: 30px;
    background-color: pink;
}
div p{
    counter-increment: number 3;
}
div p::after{
    content:"第" counter(number, upper-alpha) "章";
    color: green;
}
</style>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

css 的content是什么，有什么作用？

4.常用功能

上面的实例只是帮我们学习了解content，其实上述实例用到的不算多，下面就把常用的列出来

4.1 清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -清除浮动</title>
</head>

<style>
    .left {
        float: left
    }

    .right {
        float: right
    }

    .clear:after {
        content: '';
        clear: both;
        display: block;
    }
</style>

<body>
    <div class="container clear">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>

</html>

父元素.container中两个子元素.left和.right浮动后会脱离文档流，无法撑起容器，造成.container高度为0。使用伪元素:after清除浮动，三个属性缺一不可：

  • content: '';通过:after添加一个内容为空的伪元素。
  • clear: both;伪元素:after两侧浮动清除。
  • dispaly: block;设置块元素，因为clear只对块元素有效。

css 的content是什么，有什么作用？

4.2 小三角气泡窗口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -小三角气泡</title>
</head>

<style>
   .box {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    background: #fff;
    position: relative;
}
.box:after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
</style>

<body>
    <div class="box"></div>
</body>

</html>

配合伪元素:after，实现了一个右下角带倒三角指向性的气泡窗口。通过调整border各边的颜色和绝对定位位置，可以绘制出指向不同的气泡窗口，只用一个div标签实现，是不是既简洁又美观。可能你会想到这是伪元素:after的效果，和content属性无关，实际上去掉content后:after是不生效的。

css 的content是什么，有什么作用？

4.3 字体图标

通过浏览器自带的特殊字符实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -  字体图标</title>
</head>

<style>
    body {
        background-color: pink;
    }

    .music:before {
        content: '\266C';
        color: red;
    }
</style>

<body>
    <span class="music">晴天-周杰伦</span>
</body>

</html>

css 的content是什么，有什么作用？

4.5 加载动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -  加载动画</title>
</head>

<style>
   .loading:after {
        content: ".";
        animation: loading 2s ease infinite;
    }
    
    @keyframes loading {
        33% {
            content: "..";
        }
        66% {
            content: "...";
        }
    }
</style>
<body>
    <p class="loading">加载中 </p>
</body>

</html>

不会做动图，大家可以自己试一下

还有很多其它的应用，大家可以自己试一试。