CSS 徽章宽度和高度

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>

这里正在工作fiddle https://jsfiddle.net/kx5kow5m/

Answer 1

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

width:auto;
padding: 2px;

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

Answer 2

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

还可以添加一个填充：

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

Live Fiddle

CSS 徽章宽度和高度

CSS Badge width and height

css

badge