作者：卍扯淡的爱卍_989 | 来源：互联网 | 2023-05-29 13:04
我试图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;
}
How to Get Detailed PPC Keyword Data
我的另一个尝试是将一个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;
}
2
How to Get Detailed PPC Keyword Data
通过这种方法,我可以在HTML中设置Number的值.我遇到的问题是当h2文本对于单行来说太宽时,它会使整个行转到新行并且不会保留在带有圆圈数量的行上.这是不好的!见图:
有人可以帮助我找到一个好的解决方案,行为与第一个一样,宽的h2文本将留在我的数字跨度旁边吗？
1> Salman A..：
...它的效果很好,除了我无法在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;
}
Heading
京公网安备 11010802041100号