如何在HTML H2之前添加一个数字与CSS？

发布时间：2020-12-14 18:49:01 所属栏目：资源来源：网络整理

导读：我试图在 HTML和CSS中创建一个漂亮的H2标题,这将允许我在实际标题文本之前有一个很好的格式化的数字,如下图所示：图像中的示例使用下面的CSS代码,它的工作原理很好,除了我无法在HTML中的橙色圆圈中设置数字值！ h2:before { content: "2"; text-align: cent

我试图在 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!