我正在努力创造一个好看的H2HTML 和 CSS 中的标题将允许我在实际标题文本之前有一个格式良好的数字，如下图所示：
图像中的示例使用如下所示的 CSS 代码，效果很好，只是我无法在 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>
我的另一个尝试是包装h2 and a span都在一个里面div。跨度包含数字圆：
.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>
通过这种方法，我可以在 HTML 中设置 Number 的值。我遇到的问题是当h2文本对于单行来说太宽，那么它会使整个内容转到新行，并且不会保留在具有圆号跨度的行上。这不好！看图片：
有人可以帮助我找到一个像第一个解决方案一样的好解决方案，其中宽 h2 文本将保留在我的号码范围旁边吗？
...它工作得很好，除了我无法在
HTML 中的橙色圆圈！
您可以使用CSS 伪元素 http://www.w3.org/TR/CSS21/generate.html#before-after-content和 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%;
color: #FFF;
background: #F77621;
}
<h2 data-number="2">Heading</h2>
也可以将数字包裹在跨度内并将其放置在标题内。这使得搜索引擎可以看到该数字。 CSS 将保持不变，只是您不需要 content 属性。
只是记得你可以使用CSS2 计数器 http://www.w3.org/TR/CSS21/generate.html#counters如果您只想对标题进行编号：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
