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;
}
相关推荐
A_ugust__1 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生1 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园1 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8282 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊3 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿5 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊6 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅6 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防7 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump7 小时前
前端部署工具 PinMe
运维·前端·开源