css :after伪类选择器使用详解

css :after简介

css :after选择器在被选中的元素后面添加内容.

css :after伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

语法：

:after { 
   style properties 
}

如：

a.external:after  {content: " "  url(image.gif);)
p:after {content: " | ";}

css :after实例

一个简单使用css :after伪类元素的实例

<!DOCTYPE html>
<html>
<title> http://www.manongjc.com/article/1266.html </title>
<head>
<style>
p:after{
   content:"added after";
}
</style>
</head>

<body>
   <p>this is a paragraph.</p>

</body>
</html>

运行结果图：

css :after伪类选择器使用详解

css :after伪类选择器高级应用

使用after伪类元素制作三角提示框

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>css after before制作的边三角提示框</title>
    <style type="text/css">
		.arrow_box {
			position: relative;
			background: #88b7d5;
			border: 1px solid #c2e1f5;
			padding: 10px;
			width: 200px;
			height: 100px;
			border-radius: 6px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
			margin: 30px;
			float: left;
		}
		.arrow_box::after{
			position:absolute;
			content:"";
			height:0;
			width: 0;
			pointer-events: none;
			border: solid transparent;
			border-color: rgba(136, 183, 213, 0);
			border-bottom-color: #88b7d5;
			border-width: 10px;
			left: 50%;
			margin-left: -10px;
			bottom: 100%;
		}
    </style>
</head>
<body>
<div class="arrow_box"></div>
</body>
</html>

效果图：

css :after伪类选择器使用详解