关于前端:css伪元素before和after

38次阅读

共计 1262 个字符，预计需要花费 4 分钟才能阅读完成。

写过 css 款式的小伙伴应该都见过 ::before 跟::after这两个 css 的伪元素，次要的作用是在元素的前后额定新增内容。如下例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>css 伪元素（::before 和::after）</title>
<style type="text/css">
  .content::before{
    content: '后面';
    color: red;
  }
  .content::after{
    content: '前面';
    color: red;
  }
</style>
</head>
<body>
  <div class="content"> 我是两头 </div>
</body>
</html>

能够看到 我是两头 的前后各自都新增了内容（后面跟前面）。看似很一般很鸡肋的性能对吧，间接写成 后面我是两头前面 一整段不就完事了，何必花里胡哨的。如果是依照下面的例子来应用伪元素的话，的确会显得很低级。上面应用另外一个例子来证实伪元素的弱小之处。

假如要在 div 标签的前后插入图片的话，没应用过伪元素的小伙伴可能会间接通过 img 标签来实现，这样的确也能够。但有个显著的问题就是 html 构造会额定多出这些 img，随着需要的变更，这些 img 标签也越来越多，导致代码可读性差。有了伪元素，就能够在不创立新元素标签的状况下，来新增内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>css 伪元素（::before 和::after）</title>
<style type="text/css">
  .content::before{
        content: "";
        display: inline-block;
        width: 100px;
        height: 100px;
        background: url(1.jpg) no-repeat;
        background-size: 100px 100px;
  }
  .content::after{
        content: "";
        display: inline-block;
        width: 100px;
        height: 100px;
        background: url(2.jpg) no-repeat;
        background-size: 100px 100px;
  }
</style>
</head>
<body>
  <div class="content"> 我是两头 </div>
</body>
</html>

能够看到，div 标签前后各多出了图片，而代码中却只有一个 div 标签，是否感觉洁净简洁。这就是伪元素作用所在。能够在节俭标签的状况下让内容更加丰盛，真正的加量不加价

正文完