原创：叫我詹躲躲
来源：掘金
链接：巧用伪元素before和after制作绚丽效果

所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。本文主要探究伪元素beforce和after的常用使用场景。

CSS :before 选择器

定义和说明
:before 选择器向选定的元素前插入内容。
使用content 属性来指定要插入的内容。

CSS :after 选择器

定义和说明
:after 选择器向选定的元素之后插入内容。
使用content 属性来指定要插入的内容。

这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。

1.伪类光圈

<div class="hover-circle">CSS</div>

.hover-circle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 3rem;
  letter-spacing: 0.3rem;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  color: #666;
}

.hover-circle::before {
  width: 8.5rem;
  height: 8.5rem;
  border: 3px solid pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  opacity: 0;
}

.hover-circle::after {
  width: 7.2rem;
  height: 7.2rem;
  border: 6px solid pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  opacity: 0;
}

.hover-circle:hover::before,
.hover-circle:hover::after {
  animation-duration: 0.8s;
  animation-delay: 0.2s;
  animation: circle 0.8s;
}

@keyframes circle {
  0% {
    opacity: 0;
    scale: 1;
  }

  25% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.5;
    scale: 1.03;
  }

  75% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
    scale: 1.03;
  }
}

2.伪类括号效果

<div class="hover-text">CSS</div>

.hover-text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 3rem;
  letter-spacing: 0.3rem;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  color: #666;
}

.hover-text::before {
  content: "[";
  position: absolute;
  left: 0.8rem;
  opacity: 0;
  color: #999;
}

.hover-text::after {
  content: "]";
  position: absolute;
  right: 0.8rem;
  opacity: 0;
  color: #999;
}

.hover-text:hover::before {
  animation-duration: 0.8s;
  animation-delay: 0.2s;
  animation: hovertext1 0.8s;
}

.hover-text:hover::after {
  animation-duration: 0.8s;
  animation-delay: 0.2s;
  animation: hovertext2 0.8s;
}

@keyframes hovertext1 {
  0% {
    opacity: 0;
    left: 0.8rem;
  }

  100% {
    opacity: 1;
    left: 0.5rem;
  }
}

@keyframes hovertext2 {
  0% {
    opacity: 0;
    right: 0.8rem;
  }

  100% {
    opacity: 1;
    right: 0.5rem;
  }
}

3.炫酷丝带效果

双边丝带

<div class="tc">
    <div class="title1"><span>距离结束还有10天</span></div>
</div>

.title1 {
  position: relative;
  display: inline-block;
}

.title1 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  background-color: #dc5947;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);
}

.title1 span::before,
.title1 span::after {
  position: absolute;
  bottom: -6px;
  border-width: 3px 5px;
  border-style: solid;
  content: "";
}

.title1 span::before {
  left: 0;
  border-color: #972f22 #972f22 transparent transparent;
}

.title1 span::after {
  right: 0;
  border-color: #972f22 transparent transparent #972f22;
}

.title1::before,
.title1::after {
  position: absolute;
  top: 6px;
  content: "";
  border-style: solid;
  border-color: #dc5947;
}

.title1::before {
  left: -32px;
  border-width: 16px 26px 16px 16px;
  border-left-color: transparent;
}

.title1::after {
  right: -32px;
  border-width: 16px 16px 16px 26px;
  border-right-color: transparent;
}

右边丝带

<span class="title2">距离结束还有10天</span>

.title2 {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  background-color: #dc5947;
  color: #fff;
  font-size: 16px;
}

.title2::before {
  position: absolute;
  top: -4px;
  left: 0;
  border-width: 2px 4px;
  border-style: solid;
  border-color: transparent #972f22 #972f22 transparent;
  content: "";
}

.title2::after {
  position: absolute;
  top: 0;
  right: -8px;
  border-width: 16px 8px 16px 0;
  border-style: solid;
  border-color: #dc5947 transparent #dc5947 #dc5947;
  content: "";
}

箭头丝带

<span class="title3">距离结束还有10天</span>

.title3 {
  position: relative;
  display: inline-block;
  margin-right: 16px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  background-color: #dc5947;
  color: #fff;
  font-size: 16px;
}

.title3::before {
  position: absolute;
  top: 0;
  left: -16px;
  border-width: 16px 16px 16px 0;
  border-style: solid;
  border-color: transparent #dc5947 transparent transparent;
  content: "";
}

.title3::after {
  position: absolute;
  top: 0;
  right: -16px;
  border-width: 16px 16px 16px 0;
  border-style: solid;
  border-color: #dc5947 transparent #dc5947 #dc5947;
  content: "";
}

多个箭头丝带

<div class="mt30 pl16">
    <span class="title3">距离结束还有10天</span>
    <span class="title3 ml5">距离结束还有10天</span>
    <span class="title3 ml5">距离结束还有10天</span>
</div>

.title4 {
  width: 200px;
  height: 140px;
  position: absolute;
  top: -8px;
  left: -8px;
  overflow: hidden;
}

.title4::before {
  position: absolute;
  left: 124px;
  border-radius: 8px 8px 0 0;
  width: 16px;
  height: 8px;
  background-color: #972f22;
  content: "";
}

.title4::after {
  position: absolute;
  left: 0;
  top: 124px;
  border-radius: 0 8px 8px 0;
  width: 8px;
  height: 16px;
  background-color: #972f22;
  content: "";
}

.title4 span {
  display: inline-block;
  text-align: center;
  width: 200px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 30px;
  left: -50px;
  z-index: 2;
  overflow: hidden;
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px dashed #fff;
  box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);
  background-color: #dc5947;
  color: #fff;
}

悬挂标签

<div class="pr mt30" style="background-color: #eee; height: 200px;">
    <div class="title4"><span>企业热门动态</span></div>
    <div class="title5"><span>企业热门动态</span></div>
</div>

.title5 {
  width: 140px;
  height: 200px;
  position: absolute;
  top: -8px;
  right: -8px;
  overflow: hidden;
}

.title5::before {
  position: absolute;
  right: 124px;
  border-radius: 8px 8px 0 0;
  width: 16px;
  height: 8px;
  background-color: #972f22;
  content: "";
}

.title5::after {
  position: absolute;
  right: 0;
  top: 124px;
  border-radius: 0 8px 8px 0;
  width: 8px;
  height: 16px;
  background-color: #972f22;
  content: "";
}

.title5 span {
  display: inline-block;
  text-align: center;
  width: 200px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 30px;
  right: -50px;
  z-index: 2;
  overflow: hidden;
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px dashed #fff;
  box-shadow: 0 0 0 3px #dc5947, 0 14px 7px -9px rgba(0, 0, 0, 0.6);
  background-color: #dc5947;
  color: #fff;
}

4.几何图形

三角形

  <div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  margin: 50px auto;
  border-bottom: 100px solid #dc5947;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  cursor: pointer;
  transform: scale(1.2);
  transition: 0.5s;
}

五角星

<div class="pentagram"></div>

.pentagram {
  width: 0;
  height: 0;
  margin: 100px auto;
  position: relative;
  border-bottom: 70px solid #dc5947;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transform: scale(1), rotate(35deg);
  -moz-transform: scale(1), rotate(35deg);
  -ms-transform: scale(1), rotate(35deg);
  -o-transform: scale(1), rotate(35deg);
  transform: scale(1), rotate(35deg);
}

.pentagram::after {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 70px solid #dc5947;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  transform: rotate(-70deg);
  position: absolute;
  top: 0px;
  left: -100px;
}

.pentagram::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 80px solid #dc5947;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -o-transform: rotate(-35deg);
  transform: rotate(-35deg);
  position: absolute;
  top: -45px;
  left: -60px;
}

5.水滴

<div class="drop"></div>

.drop::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background-color: #ace3ff;
  margin: 100px auto;
  top: -50px;
  left: 25px;
  box-shadow: 5px 12px 4px #ace3ff, -5px 11px 4px #ace3ff, 0px 14px 4px #4d576e;
  -webkit-transform: rotate(35deg);
}

.drop::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #ace3ff transparent;
  top: -30px;
  left: 10px;
}

.drop {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ace3ff;
  position: relative;
  margin: 100px auto;
  box-shadow: 0px 6px 0 #3f475a;
}

【CSS进阶】巧用伪元素before和after制作绚丽效果（中）：https://developer.aliyun.com/article/1483393

【CSS进阶】巧用伪元素before和after制作绚丽效果（上）