第25讲伪元素

发布时间： 2016年3月29日最后更正时间：2020年6月17日

本篇文章自发布已超过8年，
请自行评估文章价值。

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

::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。

评论区

您可以留言提出您的疑问或建议。
您的留言得到回复时，会通过您填写的邮箱提醒您。