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;
}
相关推荐
祝余呀几秒前
HTML初学者第三天
前端·html
就爱瞎逛17 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81620 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者34 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端