Question

是否可以在border-bottom之前应用padding而不插入直接元素，即在content框内？例如，下面我在类上创建了一个包含div的包装器s3。我可以避免这个吗？

这是 JSFiddle 。

.top {
  border: 1px solid black;
}
.s2 {
  margin: 15px;
  padding: 15px;
  border-bottom: 1px solid blue;
}
.s3 {
  border-bottom: 1px solid blue;
}

<div class="top">
  <div class="s2">
    s2
  </div>

  <div class="s2">
    <div class="s3">
      wrapped in s3
    </div>
  </div>
</div>

我一直在寻找解决方案，这让我觉得这是不可能的。我不介意使用任何解决方案，只要它不需要我相对或绝对地定位项目。思想CSS伪元素可能允许我这样做，但事实并非如此。

Answer 1

您当然可以使用伪元素执行此操作。

.item {
    margin: 15px;
    padding: 15px;
    background: #f2f2f2;
}

.item:after {
    content: "";
    display: block;
    border-bottom: 1px solid blue;
}

<div class="item">
  Hello!
</div>

Updated Fiddle

在填充之前的css border-bottom

1 个答案: