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 の幅が固定されている場合、問題は解決されます。

.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) の変更をサポートしていないためです。