CSS多个边框在动态宽度上没有改变答案

【问题标题】：CSS multiple borders aren't changed in dynamic widthCSS多个边框在动态宽度上没有改变
【发布时间】：2013-09-07 22:24:56
【问题描述】：

我用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 看到这个演示。我该如何解决？

【问题讨论】：

标签： css border

【解决方案1】：

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

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

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

但是

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

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

【讨论】：