不推内容的内部边界

Question

我正在尝试使用CSS填充多种颜色的元素。目前，我有这个CSS：

div.container {
  width: 100px;
  border: 1px dotted;
  font-size: 10px;
}
.box {
  box-sizing:border-box;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 6px solid #99FF99;
  border-bottom-color: #FF9966;
  border-right-color: #FF9966;
}

fiddle

问题是内容不在边界上，所以它看起来像这样：

如何让span class="box"的内容保持在元素的中间（即在彩色圆圈上）？

Answer 1

如何使用绝对和相对位置，并将圆圈作为伪元素。

DEMO： http://jsfiddle.net/d0cv4bc8/8/

div.container {
    width: 100px;
    border: 1px dotted;
    font-size: 12px;
}
.box {
    position: relative;
}
.box::before {
    content: "";
    box-sizing:border-box;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 6px solid #99FF99;
    border-bottom-color: #FF9966;
    border-right-color: #FF9966;
    position: absolute;
    z-index: -1;
}

Answer 2

只有这样才能让内容垂直和水平居中，才能将内容放在一个范围内，向左和向上移动一半的边框宽度。

http://jsfiddle.net/d0cv4bc8/11/

CSS

.box .contents {
    display:inline-block;
    position: relative;
    left: -3px;
    top: -3px;
}

HTML

<div class="container">
    <span class="box"><span class="contents">1</span></span>
</div>