CSS学习笔记之伪元素，::before和::after

在页面中元素一般由HTML代码中的标签定义的，比如<div>、<span>等。有时候在一些复杂的页面造型中需要用到许多视觉元素，如果全部用DOM元素来显示，会显得过于冗余和繁杂。因此，如果使用CSS 中::befor和::after伪元素，可以简化DOM元素。

注：伪元素是由CSS生成的，而不是DOM结构生成的。

伪元素的语法是在元素后紧跟::，然后再跟伪元素关键字，如： div::after, 注意后面一个冒号表示的伪类，双冒号才是伪元素。

例：完成以下形状

分析：以上形状中的黄色部分就可以通过伪类来实现：

代码如下：

1.先实现三个灰色正方形

html

  <figure class="contain">
      <div></div>
      <div></div>
      <div></div>
    </figure>

css

/* 基本大小 居中显示 */
.contain {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 设置div边框 */
.contain div {
  position: absolute;
  border: 4px solid dimgray;
  box-sizing: border-box;
}

/* 设置三个div的大小 */
.contain div:nth-child(1) {
  width: 100%;
  height: 100%;
}

.contain div:nth-child(2) {
  width: 70%;
  height: 70%;
}

.contain div:nth-child(3) {
  width: 40%;
  height: 40%;
}

效果图

2.使用伪元素生成黄色小长方形， 并且定位到border上。

css

/* 使用伪元素生成小短条 */
.contain div::after,
.contain div::before {
  width: 4px;
  height: calc(50% + 2px);
  position: absolute;
  content: '';
  background-color: gold;
}

/* 对before 和 after 生成的伪元素分别定位 */
.contain div::after {
  left: -4px;
  top: -4px;
}

.contain div::before {
  right: -4px;
  bottom: -4px;
}

效果图：

完整css 代码

/* 基本大小 居中显示 */
.contain {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 设置div边框 */
.contain div {
  position: absolute;
  border: 4px solid dimgray;
  box-sizing: border-box;
}

/* 设置三个div的大小 */
.contain div:nth-child(1) {
  width: 100%;
  height: 100%;
}

.contain div:nth-child(2) {
  width: 70%;
  height: 70%;
}

.contain div:nth-child(3) {
  width: 40%;
  height: 40%;
}

/* 使用伪元素生成小短条 */
.contain div::after,
.contain div::before {
  width: 4px;
  height: calc(50% + 2px);
  position: absolute;
  content: '';
  background-color: gold;
}

/* 对before 和 after 生成的伪元素分别定位 */
.contain div::after {
  left: -4px;
  top: -4px;
}

.contain div::before {
  right: -4px;
  bottom: -4px;
}

 伪元素content 属性

伪元素中content属性为引用文本属性，即使没有引入文本，也不可以省略，值可以为空字符串，如上例中一样。

引用文本就是在最初的场景上，在最前或者最后增加一些字符，before是在前面，after是在后面。

如下图，如果我们需要完成这样的文字展示，就可以用伪元素来实现文本前后的固定符号。

 第一步：完成基本的文本展示

html

    <div class="back">
      <p class="html">html</p>
      <p class="css">css</p>
      <p class="js">const</p>
    </div>

css

/* 背景布局 */
.back {
  border-radius: 1em;
  padding: 0 1em;
  background: rgb(205, 205, 236);
}

/* 设置字体 */
.back p {
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bold;
  color: slateblue;
}

效果如下：

第二步:设置伪元素content属性，添加文本前后的符号。

css

/* 设置伪元素字体颜色 */
.back p::before,
.back p::after {
  color: tomato;
}

/* 设置伪元素前后文本内容  */
.back .html::before {
  content: '<';
}

.back .html::after {
  content: '>';
}

.back .css::before {
  content: '.';
}

.back .css::after {
  content: '::';
}

.back .js::before {
  content: '{';
}

.back .js::after {
  content: '}';
}

 效果：

总结：在界面布局中，可以使用伪元素来简化DOM结构。需要多练习，能够快速的从效果图中提炼中，哪些内容可以用伪元素来实现，从而简化DOM结构。