如何给h2添加php标记,如何在HTMLH2之前添加一个数字与CSS？

我试图在

HTML和CSS中创建一个漂亮的H2标题,这将允许我在实际标题文本之前有一个很好的格式化的数字,如下图所示&＃xff1a;

图像中的示例使用下面的CSS代码,它的工作原理很好,除了我无法在HTML中的橙色圆圈中设置数字值&＃xff01;

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;

}

How to Get Detailed PPC Keyword Data

我的另一个尝试是把h2和div都放在div里面.跨度保持数字圈&＃xff1a;

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

}

使用这种方法,我可以设置HTML中的Number的值.我所遇到的问题是当h2文本对于单行而言太宽,那么它将使整个事情进入一个新行,并且不保留在与行号相符的行上.这不好&＃xff01;查看图片&＃xff1a;

有人可以帮助我一个很好的解决方案,像第一个这样的行为,一个广泛的h2文本将保持在我的数字跨越&＃xff1f;