CSS - 伪元素

你好，未来的CSS法师们！今天，我们将踏上一段激动人心的旅程，探索CSS伪元素的神奇世界。作为你亲切的计算机老师，我很高兴能引导你们进行这次冒险。所以，拿起你的虚拟魔杖（键盘），让我们开始吧！

概览

想象你正在装饰一个房间。你的家具（HTML元素）已经就位，但你想要添加一些额外的装饰，而不改变家具本身。这时伪元素就派上用场了！它们就像是可以添加到你的HTML元素上的魔法装饰，而不真正修改HTML。

语法

在我们开始施法（编写代码）之前，让我们先学习咒语（语法）：

选择器::伪元素 {
属性: 值;
}

注意到双冒号（::）了吗？那就是我们的魔杖！它告诉浏览器，“嘿，我接下来要创造一些特别的东西！”

CSS ::after 伪元素

让我们从::after伪元素开始。它就像一个跟随你的元素四处走动的魔法助手，携带额外内容。

.magic-box::after {
content: "?";
margin-left: 5px;
}

在这个例子中，每个带有“magic-box”类的元素后面都会出现一个礼帽表情符号。就像我们从CSS帽子里拉出一只兔子（或者说，一顶帽子）一样！

CSS ::before 伪元素

如果::after是跟随你的元素的助手，::before则是引领道路的那个。它在你的元素之前添加内容。

.wizards-name::before {
content: "?‍♂️ ";
}

现在，每个巫师的名字前面都会有一个巫师表情符号。阿布拉卡达布拉！

CSS ::first-letter 伪元素

想要让你的文本看起来像古老的魔法卷轴吗？::first-letter就是你的咒语！

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

这将使每个段落的第一个字母变大、变紫色，并向左浮动。就像有一个魔法抄写员照亮了你的手稿！

CSS ::first-line 伪元素

类似于::first-letter，但它适用于文本的第一整行。

p::first-line {
font-weight: bold;
color: #4B0082;
}

现在，每个段落的第一个行将变为粗体和靛蓝色。就像突出显示了你魔法卷轴中最重要的一部分！

CSS ::selection 伪元素

有没有想过自定义选中文本的样式？::selection就是你的咒语！

::selection {
background-color: #FFD700;
color: #000000;
}

现在，当你选中页面上的文本时，它将有一个金色背景和黑色文本。就像把你的光标变成了国王迈达斯！

多个伪元素

你可以在单个元素上使用多个伪元素。就像叠加魔法以获得额外的魔法效果！

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

这将在带有“magical-quote”类的元素前后添加引号，使它们看起来像神秘的预言！

伪元素方法表

以下是我们学到的所有伪元素方法的便捷魔法书（表格）：

伪元素	描述	示例
::after	在元素之后添加内容	.element::after { content: "?"; }
::before	在元素之前添加内容	.element::before { content: "?‍♂️"; }
::first-letter	设置文本的第一个字母样式	p::first-letter { font-size: 2em; }
::first-line	设置文本的第一行样式	p::first-line { font-weight: bold; }
::selection	设置选中文本的样式	::selection { background-color: gold; }

记住，年轻的法师们，伪元素的强大之处在于它们能够在不 clutter 你的HTML的情况下添加样式和内容。它们就像是无形的助手，在你需要时总是存在，但从不挡道。

在我们结束这次神奇的CSS之旅时，我希望你们都能感到受到启发，去尝试这些伪元素。不要害怕混合和匹配，分层和组合。唯一的限制是你的想象力！

在我多年的教学过程中，我看到了学生使用这些简单的工具创造出令人惊叹的作品。有一个学生甚至使用伪元素创建了一个虚拟水族馆，鱼（::before和::after元素）在屏幕上游泳！

所以，向前走吧，挥动你的CSS魔杖，创造你自己的魔法。记住，在网页开发的世界里，永远不要因为年龄而不再相信一点魔法。快乐编码，愿你的样式表永远无虫！

Credits: Image by storyset