第25讲伪元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第25讲 伪元素