css - CSS多个边框在动态宽度上没有改变

Question

我使用CSS-tricks的伪元素方式编写了多个边框。

<span class="something">
    label: <span id="count">20</span>
</span>

CSS 样式是这样的：

.something {
    background-color: #B3B3B3;
    padding: 10px;
    position: relative;
    border: 2px solid #000;
}

.something:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #FF6666;
}

这看起来不错的样子。但是如果我改变了计数，它会导致改变宽度并且内部边框不会像这样改变：

你可以在jsfiddle看到这个演示。我该如何解决？

Answer 1

你真的需要灵活的元素宽度吗？如果元素 .something 具有固定宽度，则问题将得到解决：

.something {
  display: block;
  width: 200px;

  background-color: #B3B3B3;
  padding: 10px;
  position: relative;
  border: 2px solid #000;
}

然而

如果你需要灵活的宽度，你应该在增加 .something 宽度之后重新绘制 .something:before 元素。我为此更新了 jsfiddle -检查一下。

添加的<div id="container">只是因为 jsFiddle 不支持 $(document) 修改。