:after 和 :before的使用和拓展

在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）

伪元素的使用CSS 伪元素用于向某些选择器设置特殊效果。

:first-letter向文本的第一个字母添加特殊样式
:first-line    向文本的首行添加特殊样式
:before    在元素之前添加内容
:after    在元素之后添加内容
first-line,first-letter只能用于块级元素
可以结合多个伪元素一起使用

好了开始代码：

一个很好的例子就是在li列表前面加上图标

<ul>
	<li>Java</li>
	<li>C</li>
	<li>C++</li>
	<li>Python</li>
	<li>Javascript</li>
	<li>HTML</li>
	<li>CSS</li>
</ul>

li {
	list-style: none;
}
li:before {
	content: url(star.png);
}

效果图：

还有一个例子通过:before和:after添加特效渐变阴影——>参考

1
2
3

<div class="box effect">
	<h3>Hello World!</h3>
</div>

.box h3 {
	text-align: center;
	position: relative;
	top: 80px;
}
.box {
	width: 70%;
	height: 200px;
	background: #fff;
	margin: 40px auto;
}
.effect {
	position: relative;
}
.effect:before, .effect:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #777;
	box-shadow: 0 15px 10px #777;
	transform: rotate(-3deg);
}
.effect:after
{
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}

效果图是图一 Orz

其他伪元素的使用：

<p>He was my North, my South, my East and West, <br>
	My working week and my Sunday rest, <br>
	My noon, my midnight, my talk, my song; <br>
	I thought that love would last forever: I was wrong.</p>

p:first-line {
	color: red;
}
p:first-letter {
	color: blue;
}
p:before {
	content: url(star.png);
}
p:after {
	content: url(after.png);
}

效果：

区别于伪类
伪类的使用简介：

CSS 伪类用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定 lang 属性的元素添加样式