每个 "::before" 伪元素的不同内容答案

【问题标题】：Different content for each "::before" pseudo-element每个 "::before" 伪元素的不同内容
【发布时间】：2018-09-03 00:01:59
【问题描述】：

我们如何为每个::before 伪元素赋予不同的内容？我的代码如下所示：

.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
}

.timeline h1:first-of-type:before {
  content: '01';
  color: #E82F3A;
}

.timeline h1:nth-of-type(2):before {
  content: '02';
  color: #E82F3A;
}

.timeline h1:last-of-type:before {
  content: '03';
  color: #E82F3A;
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

<div class="timeline">
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

我希望第一个 <h1> 的 ::before 伪元素具有内容“01”，第二个具有内容“02”，最后一个具有内容“03”。但是当我尝试代码时，所有<h1> 的::before 内容都是'03'。怎么了？

【问题讨论】：

每个div只包含一个h1。您需要 div:nth-of-type(..) h1 作为选择器。
您真正想做的是查看 CSS Counters。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/…
添加了 nth-of-type 和基于 CSS 计数器的解决方案。

标签： html css css-selectors pseudo-element css-content

【解决方案1】：

您将需要nth-child 选择器。由于您的 divs 是兄弟姐妹，因此您可以创建一个 CSS 规则，其中包括该规则和他们的孩子。假设divs 的父级具有id 的foobar，示例可能是这样的：

#foobar :nth-child(3) h1::before {
    /*your rule*/
}

【讨论】：

【解决方案2】：

您示例中的每个h1 都是first-of-type，因为计数会在每个新父级div 上重置，因此您需要使用div:nth-of-type h1::before。

div h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
}

div:nth-of-type(1) h1::before {
  content: '01';
  color: #E82F3A;
}

div:nth-of-type(2) h1::before {
  content: '02';
  color: #E82F3A;
}

div:nth-of-type(3) h1::before {
  content: '03';
  color: #E82F3A;
}

div h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

如果你真的想要数字，你可以使用 CSS 计数器：

body {
  counter-reset: section;
}

div h1::before {
  counter-increment: section;
  position: absolute;
  font-size: inherit;
  left: 0;
  content: "0"counter(section);
  color: #E82F3A;
}

div:nth-of-type(10) h1::before,
div:nth-of-type(10) ~ div h1::before {
  content: counter(section);
}

div h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

【讨论】：

哇，它的工作！谢谢！我真的很喜欢你的回答:)
不要硬编码前导零，使用 css: counter(section, decimal-leading-zero);
会创建011 而不是11？这是不受欢迎的，因为我只会在单个数字前面加上前缀。
@connexo：它只将前导零添加到个位数。事实上，在零填充很重要的情况下，小数前导零仅在 10 到 99 之间有用。从 100 开始它变得无用，因为它仅填充单个数字。（但这主要是因为 CSS 计数器无法预先知道需要对多少元素进行编号，因此无法自动调整前几项的零填充。）
@BoltClock 除了 W3C 的 CSS Counters Level 3 Spec 之外，此功能是否记录在任何地方？我什至在 MDN 和 caniuse.com 上都找不到相关信息。

【解决方案3】：

:first-of-type、:nth-of-type 和 :last-of-type 伪类指的是第一个/第 n 个/最后一个元素在兄弟姐妹中。由于您的<h1>s 都包含在自己的<div>s 中，因此它们同时匹配:first-of-type 和:last-of-type，并且稍后定义的规则获胜。

您可以使用CSS counters，而不是处理所有这些。

.timeline {
  counter-reset: my-counter;
}

.timeline h1::before {
  content: counter(my-counter, decimal-leading-zero);
  counter-increment: my-counter;
}

/* the rest is your original code */
.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
  color: #E82F3A;
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

<div class="timeline">
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

分解：

.timeline {
  counter-reset: my-counter;
}

我们正在创建一个名为 my-counter 的新计数器。在我们使用它之前需要对其进行初始化。 counter-reset 处理这个问题。每个.timeline 都有一个从0 开始的my-counter 计数器。我们将在h1::before 伪元素中递增它，因此实际显示的数字从1 开始。

.timeline h1::before {
  content: counter(my-counter, decimal-leading-zero);
  counter-increment: my-counter;
}

在这里，我们将h1::before 伪元素的内容设置为my-counter 计数器的值，并使用counter 将decmial-leading-zero list style 应用于它。 counter-increment 在显示之前将 my-counter 的值增加 1。

【讨论】：