1.  :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例：

HTML代码：

<p>你好</p>

CSS代码：

p:before{
   content: 'Hello';
   color: red;
}
p:after{
    content: 'Tom';
    color: red;
}

效果图：

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

 

  在日常的工作中会经常遇到小三角形这样的小图标，可以用添加图片的方式实现，但是更方便的是用:after :before伪类来实现。

 

  HTML代码：

 

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

CSS代码：

 

.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;

}

 效果如图所示：

 

这样就可以在文字后面添加一个小三角形啦，是不是很方便呀，通过设计还可以设计出其他好看图形，对于网页增色，有着很好效果！

互关呀各位。

 

 

 

素材来自网络，顺便增加一点自己见解，仅供参考。

2022.4.22基于html5的网页学习基础学习