Skip to main content

伪元素 Pseudo Elements

Docs

伪元素 - CSS | MDN (mozilla.org)

伪元素：:: 伪选择器用于表示无法用 HTML 语义表达的实体。

  • 例子：p::first-line 匹配所有 <p> 元素的第一行。
伪元素 Pseudo Elements
/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。上例中的 ::first-line 伪元素可改变段落首行文字的样式。

伪类和伪元素
  • 伪类能够根据状态改变元素样式。
  • 伪元素可用于设置元素特定部分的样式。

常用的伪元素有：

  • :first-line、::first-line

    • ::first-line 可以针对首行文本设置属性。::first-line 在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
    • 和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。
    • ::first-line 伪元素只能在块容器中，所以，::first-line 伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。

  • :first-letter、::first-letter：可以针对首字母设置属性。

    • 会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
    • 首行只在 block-container box内部才有意义，因此 ::first-letter 伪元素 只在display属性值为 block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用。其他情况下，::first-letter 毫无意义。
    • ::before 伪元素 和 content 属性结合起来有可能会在元素前面注入一些文本。如此，::first-letter 将会匹配到 content 文本的首字母。

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

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

    • ::before 和 ::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
    • 常通过 content 属性来为一个元素添加修饰性的内容。
备注

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

注意

在 CSS 2 中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在 CSS 2.1 中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

所以按照规范，应该使用双冒号（::）而不是单个冒号（:），(比如 ::first-line) 以便区分伪类和伪元素。但是，目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

由于旧版本的 W3C 规范并未对此进行特别区分，因此过去的浏览器都实现过 CSS 2 的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。如果需要支持老旧的浏览器，那么 :first-line 是唯一的选择，反之，更推荐使用 ::first-line。

<div class="css-pseudo-elements-demo">
  <div class="item">
    <span class="keyword">normal: </span>
    <p class="normal">
      China is accelerating wind and solar power development for its transition to green energy even as it increases
      coal, oil, and gas output to ensure energy security this year, the National Energy Administration
      said.国家能源局表示，在增加煤炭、石油和天然气产量以确保今年能源安全的同时，中国正在加快风能和太阳能的发展，以向绿色能源过渡。
    </p>
  </div>
  <div class="item">
    <span class="keyword">first-line: </span>
    <p class="line-uppercase">China is accelerating wind and solar power development for its transition to
      green energy even as it increases
      coal, oil, and gas output to ensure energy security this year, the National Energy Administration
      said.
    </p>
  </div>
  <div class="item">
    <span class="keyword">first-letter: </span>
    <p class="letter-uppercase">China is accelerating wind and solar power development for its transition to green
      energy even as it increases
      coal, oil, and gas output to ensure energy security this year, the National Energy Administration
      said.
    </p>
  </div>
  <div class="item">
    <span class="keyword">before: </span>
    <p class="before-content">China is accelerating wind and solar power development for its transition to green
      energy even as it increases
      coal, oil, and gas output to ensure energy security this year, the National Energy Administration
      said.
    </p>
  </div>
  <div class="item">

    <span class="keyword">after: </span>
    <p class="after-content">China is accelerating wind and solar power development for its transition to green
      energy even as it increases
      coal, oil, and gas output to ensure energy security this year, the National Energy Administration
      said.
    </p>
  </div>
</div>
http://localhost:3000/css-pseudo-elements.html
normal:

China is accelerating wind and solar power development for its transition to green energy even as it increases coal, oil, and gas output to ensure energy security this year, the National Energy Administration said.国家能源局表示，在增加煤炭、石油和天然气产量以确保今年能源安全的同时，中国正在加快风能和太阳能的发展，以向绿色能源过渡。

first-line:

China is accelerating wind and solar power development for its transition to green energy even as it increases coal, oil, and gas output to ensure energy security this year, the National Energy Administration said.

first-letter:

China is accelerating wind and solar power development for its transition to green energy even as it increases coal, oil, and gas output to ensure energy security this year, the National Energy Administration said.

before:

China is accelerating wind and solar power development for its transition to green energy even as it increases coal, oil, and gas output to ensure energy security this year, the National Energy Administration said.

after:

China is accelerating wind and solar power development for its transition to green energy even as it increases coal, oil, and gas output to ensure energy security this year, the National Energy Administration said.

<div class="css-pseudo-elements-demo1">
  <ul class="travel">云南旅行
    <li class="item plan">晋城古镇</li>
    <li class="item hot">白沙古镇</li>
    <li class="item hot">巍山古城</li>
    <li class="item hot">建水古城</li>
  </ul>
</div>
http://localhost:3000/css-pseudo-elements-demo1.html
    云南旅行
  • 晋城古镇
  • 白沙古镇
  • 巍山古城
  • 建水古城