CSS的伪元素::after和::before

::after和::before使用方法

1. 在元素内容前后加上指定内容

p::before{
   content: 'Sally';
   color: pink;
}
p::after{
   content: 'I am Lily';
   color: red;
}

<p>你好</p>

示例效果:

2. ::after 清除浮动

这里不详细介绍了，我的另一篇文章理解CSS浮动float 有介绍 https://blog.csdn.net/qq_43553067/article/details/88741490

3. :before和:after 用来写小三角形

<div class="demo">这是一个测试</div>

.demo:after{
          content: '';
          display: inline-block;
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-left: 8px solid #AFABAB;
          position: relative;
          top: 2px;
          left: 10px;
}

效果展示:

4.用:after和:before 写一个对话框

<div class="left">
    <p>吃了吗</p>
  </div>
  <div class="right">
    <p>吃过了，吃了红烧排骨和酸菜鱼</p>
</div>

.left,.right{
        min-height: 40px;
        display: table;
        position: relative;
        text-align: center;
        border-radius: 7px;
        background-color: #9EEA6A;
      }
      .right {
        top:  60px;
        left: 60px;
      }
      /*使内容垂直居中*/
      .right>p,.left>p{
        display: table-cell;
        vertical-align: middle;
        padding: 0 10px;
      }
      /*用伪类写出三角形*/
      .left::after,.right::before{
        content: '';
        width: 0;
        height: 0;
        border: 8px solid transparent;
        position: absolute;
        top: 11px;
      }
      .left::after{
        border-right: 8px solid #9EEA6A;
        left: -15px;
      }
      .right::before{
        border-left: 8px solid #9EEA6A;
        left: 243px;
}

效果如图所示:

也可以加个边框让她美观一些哦~

设计代码如下

不知道为什么粘贴代码总是卡壳…那就放图片把 放重点部分嘻嘻 记得.left,.right也要加上border样式哦~~