:after伪类选择器在被选元素的内容后面插入内容；需使用 content 属性来指定要插入的内容。
最基本的用法如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after {
content: "- 台词";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>效果图：
:after伪类属于内联元素，但是用display:block；属性可以将其转换成块状元素，比较常见的用法就是样式的一些实现，还有就是清除浮动的效果。。
注：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。
after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
after伪类的一些应用
1、 :after清除浮动
浮动布局导致高度坍塌影响到整体布局时元素需要清除浮动，使用:after就是其中的一种方法：
.row:after {
width:0;
height:0;
content:'';
display: block;
clear: both;
}2、:after小三角
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
.textRight {
text-align: right;
}
.triangle {
width: 300px;
}
.triangle p {
padding: 10px;
margin-bottom: 10px;
}
.triangle p span {
position: relative;
border-radius: 7px;
background-color: #9EEA6A;
padding: 6px 10px 8px 10px;
z-index: 1;
}
.triangle p span:after {
content: '';
display: block;
width: 0;
height: 0;
border: 8px solid transparent;
position: absolute;
top: 10px;
}
.triangle p.textRight span:after {
border-left: 8px solid #9EEA6A;
right: -16px;
}
</style>
</head>
<body>
<div class="triangle">
<p class="textRight"><span>Hello !!</span></p>
</div>
</body>
</html>效果图：
以上就是css中after伪类有什么作用？的详细内容，更多请关注0133技术站其它相关文章！
