CSS3 伪元素(Pseudo-elements)大全

CSS3 伪元素(Pseudo-elements)大全

CSS3 伪元素用于选择元素的特定部分,以双冒号 :: 开头(CSS3 规范推荐写法,但单冒号 : 也支持以保持向后兼容)。

主要 CSS3 伪元素列表

  1. ::before

    在元素内容前插入生成的内容

    css 复制代码
    p::before { content: "→ "; }
  2. ::after

    在元素内容后插入生成的内容

    css 复制代码
    p::after { content: " ←"; }
  3. ::first-letter

    选择块级元素的首字母

    css 复制代码
    p::first-letter { font-size: 2em; }
  4. ::first-line

    选择块级元素的第一行

    css 复制代码
    p::first-line { font-weight: bold; }
  5. ::selection

    选择用户选中的文本部分

    css 复制代码
    ::selection { background: yellow; }
  6. ::placeholder

    选择表单元素的占位文本

    css 复制代码
    input::placeholder { color: #999; }
  7. ::backdrop

    全屏元素后面的背景层

    css 复制代码
    video::backdrop { background: black; }
  8. ::marker (CSS3 新增)

    选择列表项的标记(如 <li> 的项目符号)

    css 复制代码
    li::marker { color: red; }
  9. ::spelling-error (实验性)

    标记浏览器检测到的拼写错误文本

    css 复制代码
    ::spelling-error { text-decoration: wavy red underline; }
  10. ::grammar-error (实验性)

    标记浏览器检测到的语法错误文本

    css 复制代码
    ::grammar-error { text-decoration: wavy green underline; }

注意事项

  1. 单冒号 vs 双冒号

    • 单冒号是CSS2的写法,CSS3 规范推荐使用 ::(如 ::before
    • 但浏览器也支持 : 写法(如 :before)以保持兼容性
    • 唯一例外是 :before:after:first-letter:first-line 在 CSS2 中已存在
  2. 必须设置 content 属性

    css 复制代码
    .box::before {
      content: ""; /* 必须设置,即使是空字符串 */
      display: block;
      width: 20px;
    }
  3. 伪元素组合使用

    css 复制代码
    blockquote::first-letter::after {
      content: "'";
      color: red;
    }
  4. 浏览器兼容性

    • 大多数现代浏览器支持所有标准伪元素
    • ::marker 在旧浏览器中支持有限
    • ::spelling-error::grammar-error 仍处于实验阶段

实际应用示例

css 复制代码
/* 自定义列表标记 */
ul li::marker {
  content: "✓ ";
  color: green;
}

/* 输入框清除按钮样式 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  background: url(close.svg) no-repeat;
}

/* 首行首字母特殊样式 */
article p::first-line {
  font-variant: small-caps;
}
article p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
}
相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj5 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel6 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel6 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld7 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷9 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离9 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库