CSS伪元素 - 当发网

什么是伪元素？

CSS伪元素用于创建不在文档树中的虚拟元素，并为其设置样式。它们允许您为元素的特定部分添加样式，而无需添加额外的HTML标记。

伪元素的特点：

以双冒号（::）开头（CSS3语法）
创建虚拟元素
用于元素的特定部分
减少HTML标记的复杂性

注意： 在CSS3中，伪元素使用双冒号（::）语法，但为了向后兼容，单冒号（:）仍然有效。建议使用双冒号语法。

伪元素与伪类的区别

伪元素和伪类都是CSS选择器的一部分，但它们有不同的用途：

伪类：选择元素的特定状态（如:hover、:focus）
伪元素：创建并选择元素的特定部分（如::before、::after）

::before 和 ::after

这两个伪元素用于在元素内容的前面或后面插入生成的内容：

::before

在元素内容的前面插入内容：

                        CSS
                    

                        .quote::before {
    content: "“";
    font-size: 2em;
    color: var(--primary-color);
}
                    

::after

在元素内容的后面插入内容：

                        CSS
                    

                        .quote::after {
    content: "”";
    font-size: 2em;
    color: var(--primary-color);
}
                    

这是一个使用::before和::after伪元素的引用示例。

content属性

content属性是::before和::after伪元素的必需属性，用于定义插入的内容：

值	描述	示例
字符串	文本内容	content: "前缀"
attr()	元素的属性值	content: attr(data-prefix)
url()	图像URL	content: url(icon.png)
counter()	计数器	content: counter(chapter)
""	空内容	content: ""

生成内容的样式

伪元素生成的内容可以像普通元素一样应用样式：

                        CSS
                    

                        .decorative::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    margin-right: 10px;
}
                    

::first-letter

选择元素内容的第一个字母：

                        CSS
                    

                        p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    float: left;
    margin-right: 5px;
}
                    

这是一个使用::first-letter伪元素的段落示例。首字母被放大并设置为不同的颜色，创建了一种装饰性的效果，常用于杂志和书籍的排版中。

::first-letter的限制

::first-letter伪元素有一些使用限制：

仅适用于块级元素
不能选择行内元素的第一个字母
某些CSS属性不适用（如position、float等）

::first-line

选择元素内容的第一行：

                        CSS
                    

                        p::first-line {
    font-weight: bold;
    color: var(--primary-color);
    text-transform: uppercase;
}
                    

这是一个使用::first-line伪元素的段落示例。第一行被设置为粗体、主色调并转换为大写字母。

这是段落的第二行，它保持了正常的样式。调整浏览器窗口大小可以看到第一行的变化。

::first-line的限制

::first-line伪元素也有一些使用限制：

仅适用于块级元素
只能应用某些CSS属性（字体、颜色、背景等）
第一行的长度取决于元素宽度和字体大小

::selection

选择用户选中的文本部分：

                        CSS
                    

                        ::selection {
    background-color: var(--primary-color);
    color: white;
}
                    

选中这段文本查看::selection伪元素的效果。选中的文本会显示自定义的背景色和文字颜色。

::selection的限制

::selection伪元素有一些使用限制：

只能使用有限的CSS属性（color、background、cursor等）
不能使用position、float等布局属性
某些浏览器可能有不同的实现

::placeholder

选择表单元素的占位符文本：

                        CSS
                    

                        input::placeholder {
    color: #999;
    font-style: italic;
}
                    

其他伪元素

::marker

选择列表项的标记（如项目符号或数字）：

                        CSS
                    

                        li::marker {
    color: var(--primary-color);
    font-weight: bold;
}
                    

第一个列表项
第二个列表项
第三个列表项

::backdrop

选择全屏元素的背景层：

                        CSS
                    
                        dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

::file-selector-button

选择文件输入框的按钮：

                        CSS
                    

                        input[type="file"]::file-selector-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
}
                    

伪元素效果演示

当前伪元素: 无

当前样式: 无

演示状态: 未激活

伪元素类型

选择伪元素:

样式效果

选择样式:

操作控制

选择伪元素类型和样式，然后点击"应用效果"来查看演示。

这是一个演示伪元素效果的段落。您可以尝试不同的伪元素类型和样式来查看它们如何改变这个元素的外观。伪元素允许您在不需要额外HTML标记的情况下添加装饰性内容。调整浏览器窗口大小可以查看::first-line伪元素的效果变化。

应用的CSS代码

                            CSS
                        
                            /* 选择伪元素和样式后，这里将显示对应的CSS代码 */

实际应用示例

装饰性图标

                        CSS
                    

                        .icon-list li::before {
    content: "✓";
    color: green;
    font-weight: bold;
    margin-right: 10px;
}
                    

工具提示

                        CSS
                    

                        .tooltip {
    position: relative;
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
                    

自定义复选框

                        CSS
                    

                        .custom-checkbox {
    position: relative;
    padding-left: 30px;
}

.custom-checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

.custom-checkbox:checked::after {
    content: "✓";
    position: absolute;
    left: 5px;
    top: 0;
    color: green;
    font-weight: bold;
}
                    

清除浮动

                        CSS
                    

                        .clearfix::after {
    content: "";
    display: table;
    clear: both;
}
                    

高级应用：创建复杂形状

                        CSS
                    

                        .speech-bubble {
    position: relative;
    background: var(--primary-color);
    color: white;
    padding: 15px;
    border-radius: 10px;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: var(--primary-color) transparent transparent;
}
                    

浏览器兼容性

伪元素	Chrome	Firefox	Safari	Edge
::before / ::after	1.0	1.5	4.0	8.0
::first-letter	1.0	1.0	1.0	5.5
::first-line	1.0	1.0	1.0	5.5
::selection	1.0	1.0	1.0	9.0
::placeholder	57.0	51.0	10.1	16.0
::marker	86.0	68.0	11.1	86.0

最佳实践

使用双冒号语法： 虽然单冒号语法仍然有效，但建议使用双冒号语法以区分伪类和伪元素。

考虑可访问性： 使用伪元素添加的内容可能不会被屏幕阅读器读取，重要内容应直接包含在HTML中。

性能考虑： 过度使用伪元素可能会影响页面性能，特别是在动画和过渡中。

渐进增强： 伪元素通常是装饰性的，确保页面在没有伪元素的情况下仍然可用。

上一课：伪类下一课：高级CSS