Question

我正在制作一些css徽章。问题是，当数字为100且最后一个字符离开徽章时会更大？

如果数字大于99，是否可以创建更大的徽章？

这是我的代码

CSS

.badge[data-badge]:after {
   content:attr(data-badge);
   font-size:.7em;
   background:rgba(48, 174, 227, 1);
   color:white;
   width:18px;
   height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
   margin-top: 7px;
   float:left;
}

HTML

<span class='badge' data-badge='27'></span>

这是工作小提琴 https://jsfiddle.net/kx5kow5m/

Answer 1

尝试设置width: auto并添加min-width: 18px。

还可以添加填充：

width: auto;
min-width: 18px;
paddding: 4px;

Live Fiddle

Answer 2

设置width: auto并根据需要添加填充。

width:auto;
padding: 2px;

示例：https://jsfiddle.net/kx5kow5m/2/

CSS徽章宽度和高度

2 个答案: