什么是::after

MDN上是这么定义的

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

在css中 ::after 会为所选元素创建一个伪元素作为这个元素的最后一个子元素，::after 通过 content属性 经常被用来给元素添加修饰内容，它默认是 display:inline

例1

    钢铁是怎样炼成的  
复制代码

.book::before{  content:"《"}.book::after{  content:'》';}复制代码

《钢铁是怎样炼成的》复制代码

例2 如何让两行文字 两端对齐

  姓名  联系方式复制代码

/*思路 利用justify文本两端对齐 的特性 让 文字与 ::after 生成的伪元素两端对齐 然后再给  span设置height 让伪元素 溢出 最后在span上 隐藏溢出 overflow:hidden*/span{  border:1px solid red;  display:block;  width:100px;  line-height:20px;  height:20px;  overflow:hidden;  text-align:justify;/* 文本两端对齐 */}span::after{  display:inline-block;/* ::after 默认是inline的*/  content:'';  width:100%;  border:1px solid black;}复制代码

例3 画 一个阴阳图案

    
复制代码

#yinyang{  background-color:white;  width:100px;  height:50px;  border: 2px solid red;  border-bottom:50px solid red;  border-radius:50%;  display:relative}#yinyang::before{  position:absolute;  background-color:white;  content:'';  border:20px solid red;  width:10px;  height:10px;  border-radius:50%;  top:35px;}#yinyang::after{  position:absolute;  background-color:red;  content:'';  border:20px solid white;  width:10px;  height:10px;  border-radius:50%;  top:35px;  left:60px}复制代码