css中after伪类有什么作用？

在CSS中，:after伪类的作用就是在指定的元素内容（而不是元素本身）之后插入一个包含content属性指定内容的行内元素。下面本篇文章就来给大家介绍一下:after伪类，希望对大家有所帮助。

: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>

效果图：