CSS：用邊距調整框的寬度？

Question

我有一個盒子，盒子的寬度是可變的，因為它取決於容器的大小。 該框沒有內容，因此無法使用邊距來相對定義其寬度，但無法正常工作。 這是我的代碼：

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  content:"";
  border-top: 2px solid red;
  margin: -20px 0 7px -7px;
  position:absolute;
  width:auto;
}

這是我的小提琴http://jsfiddle.net/x7rrj/3/

請注意紅色邊框是如何在不遵循右邊距的情況下超出框的，如果我將寬度設置為自動，則紅色邊框將根本不會顯示。 是否可以僅使用CSS來解決此問題？

謝謝。

Answer 1

我看着小提琴，發現上面沒有顯示紅色的邊框。

它與填充線：0 100％; 刪除該行似乎可以解決您的問題。

這是您想要的最終結果嗎？

http://jsfiddle.net/z5952/

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  position: absolute;
  width: auto;
}

Answer 2

這是您要找的東西嗎？

http://jsfiddle.net/x7rrj/16/

由於您使用position:absolute來定位線，因此您也可以使用top ， right和left來控制位置和寬度：

.box:before {
  border-top: 2px solid red;
  content: "";

  padding: 0 100%;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

Answer 3

好的，由於愛德華提出的想法，我找到了答案。 通過用上，左和右替換邊距解決了問題。

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  width: auto;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}