常见伪元素的使用before-after

最新推荐文章于 2025-05-09 09:02:00 发布

小林芝คิดถึง

最新推荐文章于 2025-05-09 09:02:00 发布

阅读量537

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/coderlhj666/article/details/124795866

版权

本文探讨了为何在某些场景下使用CSS3的伪元素`:before`和`:after`更为合适，它们能用于在元素内容前后插入内容，提高代码简洁性和阅读性。通过实例比较了与使用span元素的区别，并提醒在使用伪元素时，务必包含`content`属性以确保效果呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见伪元素的使用before-after

一、为什么有些场景使用伪元素会更好呢？

为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容。

假如我需要在一段文本之前添加一些文字，首先我们可能会想到的是在前面或者后面使用span元素添加

<!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>Document</title>
</head>
<style>
  .box1 {}

  .before {
    color: #f00;
  }

  .after {
    color: blue;
  }
</style>

<body>
  <div class="box1">
    <span class="before">npm</span>
    我是box1
    <span class="after">npa</span>
  </div>
</body>

</html>

通过上面代码可以发现用用span元素也可以实现，但是如果我们有多个这样需要添加前后文字或者其他的，就会出现一下情况

<!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>Document</title>
</head>
<style>
  .box1 {}

  .before {
    color: #f00;
  }

  .after {
    color: blue;
  }
</style>

<body>
  <div class="box1">
    <span class="before">npm</span>
    我是box1
    <span class="after">npa</span>
  </div>

  <div class="box2">
    <span class="before">npm</span>
    我是box2
    <span class="after">npa</span>
  </div>
  <div class="box3">
    我是box3
  </div>
</body>

</html>

就需要很多这样的span元素加入到页面中，从而导致重复代码多，阅读性差等
同时这里会因为代码的阅读性好，会产生一个空格（如上图）

二、有没有更好的方案解决上面的情况呢，答案是有的那就是使用伪元素（其中之一方案）

<!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>Document</title>
</head>
<style>
  .box1 {}

  .before {
    color: #f00;
  }

  .after {
    color: blue;
  }

  .box4::before {
    content: "哈哈哈";
    color: blueviolet;
  }

  .box4::after {
    content: "呵呵呵";
    color: rgb(55, 0, 255);
  }
</style>

<body>
  <div class="box1">
    <span class="before">npm</span>
    我是box1
    <span class="after">npa</span>
  </div>

  <div class="box2">
    <span class="before">npm</span>
    我是box2
    <span class="after">npa</span>
  </div>
  <div class="box3">
    我是box3
  </div>

  <div class="box4">我是box4</div>
</body>

</html>

使用伪元素之后，空格没有了，代码更加简洁了
如果我们需要给多个div添加伪元素，只需要弄一个公共的样式就行
比之前span元素更方便，更简洁

三、使用伪元素需要注意的细节

如果使用伪元素，不能省略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>Document</title>
</head>
<style>
  .box1 {}

  .before {
    color: #f00;
  }

  .after {
    color: blue;
  }

  .item::before {
    content: "哈哈哈";
    color: blueviolet;
  }

  .item::after {
    content: "呵呵呵";
    color: rgb(55, 0, 255);
  }

  .box6::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #f00;
  }
</style>

<body>
  <div class="box1">
    <span class="before">npm</span>
    我是box1
    <span class="after">npa</span>
  </div>

  <div class="box2">
    <span class="before">npm</span>
    我是box2
    <span class="after">npa</span>
  </div>
  <div class="box3">
    我是box3
  </div>

  <div class="box4 item">我是box4</div>
  <div class="box5 item">我是box5</div>
  <div class="box6">我是div6</div>
</body>

</html>