如何在CSS之前的HTML H2之前添加一个数字？ [英] How to prepend a number before an HTML H2 with CSS?
问题描述
我试图在HTML和CSS中创建一个漂亮的 H2 标题，这将允许我在实际的标题文本之前有一个很好的格式化数字，如以下图片：
p>
图片中的示例使用的CSS代码如下所示，除非我不能在HTML中的橙色圆圈中设置数字值！
h2：before {content：2; text-align：center;位置：相对; display：inline-block; margin-right：0.6em; -webkit-border-radius：50％; -moz-border-radius：50％; -ms-border-radius：50％; -o-border-radius：50％; border-radius：50％; width：1.6em;身高：1.6em; font-weight：900; line-height：1.6;颜色：#FFF; font-size：1em;背景：＃F77621;}
< h2>获取详细的PPC关键字数据< / h2>
将 h2 和 span 包含在 div 。跨度为数字圆：
.number-circles {margin- bottom：0.4em;}。number-circles h2 {display：inline-block; font-size：1.5em;文本转换：大写; line-height：1.75em; color：＃555;}。number-circles span.num {position：relative; display：inline-block; margin-right：0.6em; -webkit-border-radius：50％; -moz-border-radius：50％; -ms-border-radius：50％; -o-border-radius：50％; border-radius：50％; width：1.6em;身高：1.6em; font-weight：900; line-height：1.6; text-align：center;颜色：#FFF; font-size：1em;背景：＃F77621;} / *添加以显示问题* /。number-circles {max-width：15em;}
< div class =number-circles> < span class =num> 2< / span> < h2>如何获取详细的PPC关键字数据< / div>
使用这种方法，我可以在HTML中设置Number的值。我所遇到的问题是当 h2 文本对于单行太宽时，那么它使整个事情去一个新行，并不保持与圈数跨度。这不好！查看图片：
p>
有人可以帮助我一个好的解决方案，行为像第一个，其中宽h2文字将留在我的数字span
...效果很好，除了我不能设置数值HTML中的
橙色圆圈！
您可以使用 CSS伪元素和HTML5数据属性：
h2：before {content：attr（data-number）; display：inline-block; / * customize below * / font-size：1em; margin-right：0.6em; width：1.6em; line-height：1.6em; text-align：center; border-radius：50％;颜色：#FFF;背景：＃F77621;}
< h2 data-number =2>标题< / h2>
也可以在一个跨度内包装数字，并将其放置在标题内。这使得该数字对搜索引擎可见。除了你不需要content属性，CSS将保持不变。
只要记住你可以使用 CSS2计数器，如果您只想对标题编号：
.use-counter {counter-reset：foo 0;} count- counter-increment：foo 1; content：counter（foo）。 display：inline-block; / * customize below * / font-size：1em; margin-right：0.6em; width：1.6em; line-height：1.6em; text-align：center; border-radius：50％;颜色：#FFF;背景：＃F77621;}
< section class =使用计数器> < h1> Lorem ipsum dolor sit amet< / h1> < h2 class =count-this> Fusce sed nunc eget sem euismod< / h2> < h2 class =count-this>在nibh finibus finibus中的vel libero< / h2> < h2 class =count-this> Nam eleifend nulla ut placerat interdum< / h2>< / section>< section class =use-counter> < h1> Aenean ac urna id sapien< / h1> < h2 class =count-this> Nulla molestie nunc non ultrices< / h2> < h2 class =count-this> Nam eleifend nulla ut placerat interdum< / h2> < h2 class =count-this> Curabitur eget sapien temporal arcu< / h2>< / section>
p>
I am trying to create a nice looking H2 heading in HTML and CSS that will allow me to have a nice formatted Number before the actual Heading text, as shown in the following image:
The example in the image is using a CSS code like this below and it works great, except that I cannot set the number value in the orange circle in the HTML!
h2:before {
content: "2";
text-align: center;
position: relative;
display: inline-block;
margin-right: 0.6em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
width: 1.6em;
height: 1.6em;
font-weight: 900;
line-height: 1.6;
color: #FFF;
font-size: 1em;
background: #F77621;
}
<h2>How to Get Detailed PPC Keyword Data</h2>
My other attempt is to Wrap the h2 and a span both inside a div. The span is holding the number circle:
.number-circles {
margin-bottom: 0.4em;
}
.number-circles h2 {
display: inline-block;
font-size: 1.5em;
text-transform: capitalize;
line-height: 1.75em;
color: #555;
}
.number-circles span.num {
position: relative;
display: inline-block;
margin-right: 0.6em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
width: 1.6em;
height: 1.6em;
font-weight: 900;
line-height: 1.6;
text-align: center;
color: #FFF;
font-size: 1em;
background: #F77621;
}
/* added to show the issue */
.number-circles {
max-width: 15em;
}
<div class="number-circles">
<span class="num">2</span>
<h2>How to Get Detailed PPC Keyword Data</h2>
</div>
With this approach, I can set the value for the Number in the HTML. The problem I have is when the h2 text is too wide for a single line, then it makes the whole thing go to a new line and does not remain on the line with the circle number span. This is bad! See image:
Can someone help me with a good solution that behave like the first one, where a wide h2 text will stay next to my number span?
... it works great, except that I cannot set the number value in the orange circle in the HTML!
You can use CSS pseudo elements and HTML5 data attributes:
h2:before {
content: attr(data-number);
display: inline-block;
/* customize below */
font-size: 1em;
margin-right: 0.6em;
width: 1.6em;
line-height: 1.6em;
text-align: center;
border-radius: 50%;
color: #FFF;
background: #F77621;
}
<h2 data-number="2">Heading</h2>
It is also possible to wrap the number inside a span and place it inside the heading. This makes the number visible to search engines. The CSS will remain the same except that you do not need the content property.
Just remembered that you can use CSS2 counters if you simply want to number your headings:
.use-counter {
counter-reset: foo 0;
}
.count-this:before {
counter-increment: foo 1;
content: counter(foo) ".";
display: inline-block;
/* customize below */
font-size: 1em;
margin-right: 0.6em;
width: 1.6em;
line-height: 1.6em;
text-align: center;
border-radius: 50%;
color: #FFF;
background: #F77621;
}
<section class="use-counter">
<h1>Lorem ipsum dolor sit amet</h1>
<h2 class="count-this">Fusce sed nunc eget sem euismod</h2>
<h2 class="count-this">In vel libero in nibh finibus finibus</h2>
<h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2>
</section>
<section class="use-counter">
<h1>Aenean ac urna id sapien</h1>
<h2 class="count-this">Nulla molestie nunc non ultrices</h2>
<h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2>
<h2 class="count-this">Curabitur eget sapien tempor arcu</h2>
</section>
这篇关于如何在CSS之前的HTML H2之前添加一个数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
