如何使用CSS在HTML H2之前添加数字？

Question

我试图H2在HTML和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和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文本将留在我的数字跨度旁边吗？

Answer 1

...它的效果很好,除了我无法在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%;
  color: #FFF;
  background: #F77621;
}

<h2 data-number="2">Heading</h2>

也可以将数字包裹在跨度内并将其放在标题内.这使得数字对搜索引擎可见.除了您不需要content属性之外,CSS将保持不变.

记住你可以使用CSS2计数器,如果你只想为你的标题编号:

.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>