我试图在
HTML和CSS中创建一个漂亮的H2标题,这将允许我在实际标题文本之前有一个很好的格式化的数字,如下图所示：
图像中的示例使用下面的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和div都放在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文本将保持在我的数字跨越？
解决方法
… it works great,except that I cannot set the number value in the
orange circle in the HTML!
您可以使用CSS pseudo elements和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>
也可以将数字包在一个跨度内,并将其放在标题内.这使得搜索引擎可以看到该号码.除了不需要content属性之外,CSS将保持不变.
只要记住,如果您只想编号您的标题,您可以使用CSS2 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>
