使用CSS清除伪类元素::after, ::before

在CSS中,:after伪类的作用就是在指定的元素内容(而不是元素本身)之后插入一个包含content属性指定内容的行内元素。

我们会使用伪元素在无法创建dom的节点中增加元素,来达到想要的css效果。

例如:

// 使用css伪元素创建一个实体样式
.element-class::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  background-color: #000;
}

这样在<div class="element-class relative"></div>中就会出现一个宽高20像素,浮动的黑色小块,这个小块隶属于element-class,但不会影响父元素。

当我们需要清除这个元素的时候,只需要如下:

.element-class::before { content: none }

即可让当前after不出现在dom节点中,自然也就不会看到这个元素了。

本文系作者 @ 原创发布在 徐小鹏的个人分享。未经许可,禁止转载。

Like()
feacx
站长
31 Posts
0 Comments
97 Likes
Top