每个“::before”伪元素的不同内容

Question

如何给每个::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”。怎么了？

Answer 1

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

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

Answer 2

您示例中的每个 h1 都是 first-of-type，因为每个新的 parent 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>

Answer 3

:first-of-type、:nth-of-type和:last-of-type pseudo-classes指的是first/nth/last兄弟姐妹中的first/nth/last个元素.由于您的 <h1> 都包含在各自的 <div> 中，因此它们同时匹配 :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 pseudo-element 中递增它，因此实际显示的数字从 1 开始。

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

这里我们将 h1::before pseudo-element 的内容设置为 my-counter 计数器的值，并应用 decmial-leading-zero list style to it with counter. counter-increment 增加 my-counter 的值在显示之前减 1。

每个“::before”伪元素的不同内容

Different content for each "::before" pseudo-element

html

css

css-selectors

pseudo-element

css-content