html - 调整伪元素宽度

Question

如何在不设置 .item-class 的填充/边距的情况下调整伪元素的宽度？假设我想在边框的每一侧留出 20 像素。

HTML

 <div class="container">
     <div class="item">
         <p>Box 1</p>
     </div>
     <div class="item">
         <p>Box 2</p>
     </div>
 </div>

CSS

.container {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
}

.item {
    position: relative;
    display: flex;
    flex: 1;
}

.item:after {
     width: 100%; // ?
     height: inherit;
     position: absolute;
     border-bottom: 1px solid #000;
     content: " ";
}

Answer 1

像这样简单地使用left/right:

.container {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.item {
  position: relative;
  display: flex;
  flex: 1;
}

.item:after {
  left:20px;
  right:20px;
  height: inherit;
  position: absolute;
  border-bottom: 1px solid #000;
  content: " ";
}

<div class="container">
  <div class="item">
    <p>Box 1</p>
  </div>
  <div class="item">
    <p>Box 2</p>
  </div>
</div>