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

时间:2016-07-26
css :after伪类选择器用于向被选中的HTML元素后面添加指定内容的行内元素,css :after选择器经常与content 属性一起使用,本文章向大家介绍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伪类选择器使用详解

上一页 下一页

原文地址:http://www.manongjc.com/article/1266.html