[英]Different content for each “::before” pseudo-element
How can we give different content to each ::before
pseudo-element? 我们如何为每个::before
伪元素提供不同的内容? My code looks like this: 我的代码看起来像这样:
.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>
I want the first <h1>
's ::before
pseudo-element to have content '01', the second's to have content '02', and the last's to have content '03'. 我希望第一个<h1>
's ::before
伪元素具有内容'01',第二个具有内容'02',而最后一个具有内容'03'。 But when I try the code, all the <h1>
's ::before
content is '03'. 但是当我尝试代码时,所有<h1>
的::before
内容都是'03'。 What's wrong? 怎么了?
You will need the nth-child selector. 您将需要第n个子选择器。 Since your di
vs are siblings, you could create a CSS rule which would include that and their child. 由于你的di
vs是兄弟姐妹,你可以创建一个CSS规则,包括那个和他们的孩子。 Assuming that the parent of the div
s has an id
of foobar
, an example might be something like this: 假设div
的父级具有foobar
的id
,示例可能是这样的:
#foobar :nth-child(3) h1::before {
/*your rule*/
}
Each h1
in your example is first-of-type
since the counting resets on every new parent div
, so you need to work with div:nth-of-type h1::before
. 您的示例中的每个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>
If your really want numbers, you can use a CSS counter: 如果您真的想要数字,可以使用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>
The :first-of-type
, :nth-of-type
, and :last-of-type
pseudo-classes refer to the first/nth/last elements among siblings . :first-of-type
, :nth-of-type
和:last-of-type
伪类指的是兄弟姐妹中的第一个/第n个/最后一个元素。 Since your <h1>
s are each wrapped in their own <div>
s, they match both :first-of-type
and :last-of-type
, and the rule defined later wins. 由于你的<h1>
都包含在它们自己的<div>
,它们都匹配:first-of-type
和:last-of-type
,以及后面定义的规则获胜。
Instead of dealing with all that, you can use CSS counters . 您可以使用CSS计数器 ,而不是处理所有这些。
.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>
Breaking it down: 打破它:
.timeline {
counter-reset: my-counter;
}
We're creating a new counter called my-counter
. 我们正在创建一个名为my-counter
的新my-counter
。 It needs to be initialized before we can use it. 它需要在我们使用它之前进行初始化。 counter-reset
handles that. counter-reset
处理。 Every .timeline
has a my-counter
counter that starts at 0. We'll be incrementing it in the h1::before
pseudo-element, so the numbers that actually display start at 1. 每个.timeline
都有一个my-counter
计数器,从0开始。我们将在h1::before
伪元素中递增它,所以实际显示的数字从1开始。
.timeline h1::before {
content: counter(my-counter, decimal-leading-zero);
counter-increment: my-counter;
}
Here we set the content of the h1::before
pseudo-element to the value of our my-counter
counter and apply the decmial-leading-zero
list style to it with counter
. 在这里,我们设置的内容h1::before
我们的价值伪元素my-counter
柜台和应用decmial-leading-zero
列表样式将其与counter
。 counter-increment
increases the value of my-counter
by 1 before it is displayed. 在显示之前, counter-increment
会将my-counter
的值增加1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.