CSS 中的 :before 和 :after 的一点小知识点

定义

:before 选择器在被选元素的内容前面插入内容。

解析

定义中提到,是在被选元素的 内容 前面插入内容,如下图,div 是一个容器,div 中的内容是 testDiv元素,css 中的 :beforeafter 都显示在 div 内部,二者分别位于 testDiv元素 内容的前后。

伪元素
<template>
  <div class="test-wrapper">
    <div class="test-div">testDiv元素</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.test-wrapper {
  padding: 20px;
  position: relative;
  background-color: #fff;
}
.test-div {
  width: 500px;
  height: 50px;
  background-color: pink;
  padding: 5px;
  position: relative;
}
.test-div::before {
  content: '12';
  background-color: yellow;
}
.test-div::after {
  content: 'after元素';
  background-color: yellowgreen;
}
</style>

所以可以看到,伪元素也是被选元素的内容,只是会插入到被选元素原本内容的前后。

伪元素的 display 属性

插入的伪元素默认是 display 属性,如果想要为伪元素设置宽高等,需要修改伪元素的 display 属性为 inline-block 或者 block

伪元素的定位

伪元素插入的位置是被选元素的 内容 的前或者后,因此本质上伪元素也是被选元素的子元素。所以定位时,被选元素就是伪元素的父元素。
如图,被选元素 test-div 设置了 position: relative,外部元素 test-wrapper 也设置了 position: relative,然后对被选元素的伪元素 :after 设置定位,可以看到,伪元素的位置是根据 test-div 来定位的,因此,可以验证 被选元素就是伪元素的父元素 这句话。

伪元素的定位
<template>
  <div class="test-wrapper">
    <div class="test-div">testDiv元素</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.test-wrapper {
  padding: 20px;
  position: relative;
  background-color: #fff;
}
.test-div {
  width: 500px;
  height: 50px;
  background-color: pink;
  padding: 5px;
  position: relative;
}
.test-div::before {
  content: '12';
  background-color: yellow;
  width: 100px;
  height: 30px;
  display: inline-block;
}
.test-div::after {
  content: 'after元素';
  background-color: yellowgreen;
  width: 80px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0;
}
</style>