CSS 伪元素详解：before、after 与 content

作用

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

tip

按照规范，应该使用双冒号 :: 而不是单个冒号 :，以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。注: IE8 仅支持 :after。

after

创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

before

创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

content

用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。

none: 不会产生伪类元素
normal: :before 和 ::after 伪类元素中会被视为 none
<string>：文本内容
<uri> url()：URI 值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）
attr(X)：将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。

示例

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    #pseudoElement .test1[data-descr] {
      position: relative;
      cursor: help;
    }

    #pseudoElement .test1[data-descr]:hover::before {
      content: attr(data-descr);
      position: absolute;
      left: 0;
      top: 24px;
      min-width: 200px;
      border: 1px #aaaaaa solid;
      border-radius: 10px;
      background-color: #ffffcc;
      padding: 12px;
      color: #000000;
      font-size: 14px;
      z-index: 1;
    }

    #pseudoElement .test2 {
      position: relative;
    }

    #pseudoElement .test2::before {
      content: '';
      position: absolute;
      left: 0;
      background-image: url(https://wflynn.cn/res/img/small/奖杯.png);
      background-size: cover;
      width: 20px;
      height: 20px;
    }

    #pseudoElement .test3::before {
      content: url(https://wflynn.cn/res/img/small/猫咪.png) '无法控制图片大小 ';
    }

    #pseudoElement li {
      list-style-type: none;
      position: relative;
      margin: 2px;
      padding: 0.5em 0.5em 0.5em 2em;
      background: lightgrey;
      font-family: sans-serif;
    }

    #pseudoElement li.done {
      background: #ccff99;
    }

    #pseudoElement li.done::before {
      content: '';
      position: absolute;
      border-color: #009933;
      border-style: solid;
      border-width: 0 0.3em 0.25em 0;
      height: 1em;
      top: 1.3em;
      left: 0.6em;
      margin-top: -1em;
      transform: rotate(45deg);
      width: 0.5em;
    }

    #pseudoElement .test::after {
      content: ' class=(' attr(class) ')';
    }
  </style>
  <body>
    <ul id="pseudoElement">
      <li class="test test1" data-descr="collection of words and punctuation">
        Buy milk
      </li>
      <li class="test test2">Take the dog for a walk</li>
      <li class="test test3">Exercise</li>
      <li class="test test4">Write code</li>
    </ul>
    <script>
      var list = document.querySelector('#pseudoElement');
      list.addEventListener(
        'click',
        function (ev) {
          if (ev.target.tagName === 'LI') {
            ev.target.classList.toggle('done');
          }
        },
        false,
      );
    </script>
  </body>
</html>

{
  "show": true
}

:::

first-letter

选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
首行只在块级元素内部才有意义, 因此 ::first-letter 伪元素只在 display 属性值为block, inline-block, table-cell, list-item 或者 table-caption 的元素上才起作用. 其他情况下, ::first-letter 毫无意义.

允许的属性值：

所有的字体属性 : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian (en-US), font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height 以及 font-family.
所有的背景属性 : background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment以及 background-blend-mode.
所有的外边距属性: margin, margin-top, margin-right, margin-bottom, margin-left.
所有的内边距属性: padding, padding-top, padding-right, padding-bottom, padding-left.
所有的边框属性: 比如一些简短的边框属性 border, border-style, border-color, border-width, border-radius, border-image, 还剩下许多冗长的边框属性等等.
color 属性.
text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (使用恰当的话), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align 注意此刻必须没有浮动) 等属性.

first-line

选中某块级元素的第一行。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
首行只在块级元素内部才有意义, 因此 ::first-letter 伪元素只在 display 属性值为block, inline-block, table-cell, list-item 或者 table-caption 的元素上才起作用. 其他情况下, ::first-letter 毫无意义.

允许的属性值：

所有和字体有关的属性：font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian (en-US), font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family
color
所有和背景有关的属性： background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
word-spacing, letter-spacing, text-decoration, text-transform, and line-height
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

示例

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    #pseudoElement1 li {
      width: 200px;
      list-style-type: none;
      position: relative;
      margin: 2px;
      padding: 0.5em 0.5em 0.5em 2em;
      background: lightgrey;
      font-family: sans-serif;
    }

    .test1::first-letter {
      color: red;
    }

    .test2 {
      display: inline;
    }

    .test2::first-letter {
      color: red;
    }

    .test3::first-line {
      background: lightcyan;
    }

    .test4::first-line {
      text-transform: uppercase;
    }
  </style>
  <body>
    <ul id="pseudoElement1">
      <li class="test test1" data-descr="collection of words and punctuation">
        Buy milk
      </li>
      <li class="test test2">Take the dog for a walk</li>
      <li class="test test3">
        这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字
      </li>
      <li class="test test4">Write code</li>
    </ul>
  </body>
</html>

{
  "show": true
}

:::

selection

应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
允许属性,只有一小部分 CSS 属性可以用于 ::selection 选择器：
color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color (en-US)
text-shadow

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    /* 选中的文本是红色背景，金黄色的字体 */
    #selection-test::selection {
      color: gold;
      background-color: red;
    }

    /*选中的是蓝色背景，白色的字体的段落*/
    #selection-test p::selection {
      color: white;
      background-color: blue;
    }
  </style>
  <body>
    <div id="selection-test">
      This text has special styles when you highlight it.
      <p>Also try selecting text in this paragraph.</p>
    </div>
  </body>
</html>

{
  "show": true
}

:::

placeholder

选择一个表单元素的占位文本
在使用了 ::placeholder 伪元素的选择器中，仅有小一部分 CSS 属性可以使用，这个集合可以参考 ::first-line 伪元素。 ::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <style>
    #placeholder-test input::placeholder {
      color: red;
      font-size: 1.2em;
      font-style: italic;
    }
  </style>
  <body>
    <div id="placeholder-test">
      <input placeholder="我是红色的！" />
    </div>
  </body>
</html>

{
  "show": true
}

:::