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

Question

我正在尝试在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和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文本太宽而无法放在一行时，它会跳到新的一行并不再与圆形数字span保持在同一行上。这很糟糕!请参见图像：

请问有人能帮我找到一个好的解决方案，使得宽h2文本仍与我的数字span保持在一起，就像第一种情况一样？

- JasonDavis

---

提示：只需使用 border-radius。不再需要添加 -webkit- 或 -moz-，而 -o-border-radius 和 -ms-border-radius 从未存在过。 - Ry-

使用您的第一个解决方案，并使用jQuery或JavaScript设置CSS属性中的数字。 - ArtOfCode

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>

还可以将数字包含在span中，放在标题内部。这样可以让搜索引擎看到数字。CSS仍然相同，只是不需要content属性。

---

如果你只想给标题编号，可以使用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>

- Salman A

---

这也是一个很好的想法，我曾经简单地考虑过它，但在某个过程中我完全忘记了它！不过我非常喜欢这个想法...需要检查并查看它在各种浏览器和平台上的运行情况，并确定它是否适用于大众。谢谢分享。 - JasonDavis

这正是CSS计数器的用途。 - You

Answer 2

将 span 放在 h2 中，您可以使用 jQuery 或纯 JS 自由编辑它。

jsFiddle

HTML: <h2><span class="number">2</span>如何获取详细的 PPC 关键字数据</h2>

CSS:

h2 span.number {
    color:white;
    background:orange;
    border-radius:50%;
    padding:4px 12px;
    margin-right: 10px;
    /* or whatever you want to do with your badge */
}

如果你有疑问：这是100%有效的，span是一个内联元素，可以放在任何你想要的地方，不会干扰你的常规文本流。

- bwitkowicz

---

我担心H@标签内的span对于SEO目的可能不是很好，你有什么想法吗？ - JasonDavis

据我所知，这对SEO没有任何影响，请参阅以下讨论：http://forums.seochat.com/web-design-coding-programming-11/nested-span-inside-h1-2-tags-good-bad-search-engine-optimization-296847.html - bwitkowicz

@jasondavis 你是从哪里得到那个想法的？ - bjb568

Answer 3

只需将数字和h2标签都设置为inline-block元素即可。

    .number-circles .num {
        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;
    }

    .number-circles h2 {
         display: inline-block; 
    }

<div class="number-circles">
  <span class="num">2</span>
  <h2>How to Get Detailed PPC Keyword Data</h2>
</div>

- n0pt3x

---

@jasondavis - 当我测试时，这个解决方案对我没有用。此外，这个解决方案是否使用了你说不想要的 content: "2";？ - j08691

这仍然与问题陈述中所述的相同。 - VenomVendor

已编辑以适应这里提供的更改建议 - n0pt3x

一种可能的选择是将span和h2块元素都设为浮动，并给h2元素一个固定的最大宽度。这样就不会导致元素移位。如果您不想为h2元素使用固定宽度，请尝试@salman_a的解决方案，如果HTML5是一个选项的话。 - n0pt3x