伪元素

伪元素用于向某些选择器设置特殊效果。 那么之前咱也接触过伪类。伪类用于向某些选择器添加特殊的效果。 从定义中看出伪元素和伪类的区别了么？没有。 咱先不讨论他们的区别。先学习一下伪元素，最后再讨论两者的区别。

::first-line

::first-line 选择器用于选取指定选择器的首行。

例如：

p::first-line {    color: #ff0000;}

　　

p元素内的文本首行变红色。

::first-letter

::first-letter选择器用于选取指定选择器的首字母。

例如：

p::first-letter {    color: #ff0000;}

　　

p元素内的文本首字母变红色。

::before

该伪元素可以在元素的内容前面插入新内容。

例1：

p::before {    content:url(logo.png);}

　　

p元素内的内容最前面加入一张logo.png的图片。

例2：

p::before {    
    content:"q";    
    text-transform:uppercase;    
    margin-right:10px;
}

　　

p元素内的内容最前面加入一个大写字母Q，右边距为10px。

::after

该伪元素可以在元素的内容最后面插入新内容。

例1：

p::after {    content:url(logo.png);}

　　

p元素内的内容最后面加入一张logo.png的图片。

例2：

p::after {    
    content:"more";    
    margin-left:10px;
}

p元素内的内容最后面加入一个英文单词more，左边距为10px。