CSS之选择器(六)::before和::after

·  阅读 232
CSS之选择器(六)::before和::after

「这是我参与11月更文挑战的第十八天,活动详情查看:2021最后一次更文挑战」。

往期链接:

CSS之选择器

CSS之选择器(二)

CSS之选择器(三)

CSS之选择器(四)

CSS之选择器(五)

前言

有些时候在绘制页面的时候,我们可能需要完成一些微小的样式,或者加入一些文字什么的,这个时候我们如果添加一些额外的标签来绘制的话,可能就会显得非常繁琐,而且可能还会变得难以维护,这个时候我们就可以引入伪元素这个概念来解决这个问题。而我们今天要介绍的是 ::before和::after这两个伪元素。

伪元素和伪类

首先,在介绍伪元素之前,我们还要介绍另一种选择器:伪类。他和伪元素的写法很像。

  • 伪元素一般是一些实体选择器,选择满足条件节点,例如::before、::after、:nth-child(n)和:first-child

  • 伪类通常是一些状态选择器,选择处于某种状态的节点,例如:before、:after、:hover、:focus和:checked

::before和::after

::before和::after必须结合content使用,

接下来,我们看一段HTML代码:

<p> 
    <span>:before</span>
    CSS 
    <span>:after</span> 
</p>
复制代码

如上,这段代码完全可以通过伪元素来实现,代码实现如下:

// HTML
<p>CSS</p>

// CSS
p { 
    &::before { 
        content: ":before"; 
    } 
    &::after { 
        content: ":after"; 
    } 
}
复制代码

接下来,我们来看一张图片

image.png

上图的气泡确认框算是比较常见的应用场景了,而右侧的小三角就可以通过伪元素来实现,接下来让我们来看代码吧。

// HTML
<div class="tab">AFTER</div>
<div class="emptyTab">BEFORE/AFTER</div>

// CSS
.tab {
  position: relative;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  background-color: #3c9;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  &::after {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: #3c9;
    content: "";
  }
}
.emptyTab {
  position: relative;
  width: 200px;
  height: 50px;
  border: 2px solid #3c9;
  border-radius: 5px;
  line-height: 46px;
  text-align: center;
  font-size: 20px;
  color: #3c9;
  &::before {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: -5px 0 0 2px;
    border: 5px solid transparent;
    border-left-color: #3c9;
    content: "";
  }
  &::after {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -4px;
    border: 4px solid transparent;
    border-left-color: #fff;
    content: "";
  }
}

复制代码

好,今天就到这里了,拜了个拜,再见各位。

分类:
前端
标签:
分类:
前端
标签: