2025年CSS常用伪元素详解

大家好，我是讯享网，很高兴认识大家。

1. 伪元素概念

CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。

2. 伪元素特点

优点：

不占用 DOM 节点，减少 DOM 节点数。
让 CSS 帮助解决了一部分 JavaScript 问题，简化了开发。
避免增加毫无意义的页面元素。

缺点：

不利于调试。
伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取。

3. 伪元素类型

注意：根据W3C规范，不考虑兼容IE8及以下版本浏览器的情况下，伪类使用单冒号（如:hover,:visited），伪元素使用双冒号

3.1 ::before和::after

特点：

默认display: inline；
必须设置content属性，否则一切都是无用功；
默认user-select: none，::before和::after的内容无法被用户通过鼠标长按滑动选中的；
会继承原本元素的CSS属性（如原元素的颜色等）

<div>大家好，我是div</div>

讯享网

讯享网div{ 
    color:red } div::before{ 
    content:"我是 before"; } div::after{ 
    content:"我是 after"; }

在这里插入图片描述
讯享网

应用场景：

::before和::after常被用来和content属性配合实现各种辅助效果，以下是几种典型场景

（1）清除浮动带来的影响（解决高度塌陷问题）

 .clear::after{ 
    clear: both; content:''; display: block; }

将clear类添加到浮动元素的父元素（注意此方法适用该父元素的子元素必须都是浮动元素，如果掺杂非浮动元素，浮动影响不会完全清理）上，则会清除浮动带来的影响。这样不必再新建一个标签去清除浮动

（2）配合@font-face实现字体图标

在这里插入图片描述
（3）实现图片生成

利用content属性的url()功能生成图片，示例：

讯享网a::before{ 
    content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-82272.3-law.gif"); }

实际项目中，通过url()方法实现图片生成的并不多，主要因为这种方式对图片的尺寸不好控制，设置宽高无法改变图片的固有尺寸。通常更多地是通过background-image属性来模拟

div::before{ 
    content:""; background-image: url("test1.jpg"); display: inline-block; width: 100px; height: 100px; }

（4）实现计数器

通过content属性的counter()方法，可以不使用列表元素实现序号功能。

counter 要配合 counter-increment 和 counter-reset属性使用。

示例：

讯享网<body> <h1>哺乳动物</h1> <h2>狗</h2> <h2>猴子</h2> <h2>猩猩</h2> <h1>冷血动物</h1> <h2>鱼</h2> <h2>蛇</h2> </body>

 body{ 
    counter-reset: section; } h1{ 
    counter-reset:subsection; } h1::before{ 
    counter-increment: section; content:counter(section)'、'; } h2:before{ 
    counter-increment: subsection; content: counter(section)'.'counter(subsection)'、'; }

在这里插入图片描述

3.2 ::first-line和::first-letter

::first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。

:first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

这两种伪类适用频率较低。

3.3 ::selection

::selection：匹配鼠标长按拖动选中的内容。可用的CSS属性为background,color

讯享网<span>士大夫士大夫胜多负少</span> span::selection{ 
    color: red; }

在这里插入图片描述

3.4 ::placeholder

::selection：用于设置input元素的placeholder内容的样式。

input::placeholder { 
    color: red; font-size: 1.2em; font-style: italic; }

在这里插入图片描述

注意：::placeholder伪元素尚未得到IE和Edge浏览器的支持

2025年CSS常用伪元素详解

1. 伪元素概念

2. 伪元素特点

3. 伪元素类型

3.1 ::before和::after

3.2 ::first-line和::first-letter

3.3 ::selection

3.4 ::placeholder

相关推荐