html - 填充前的 css border-bottom

Question

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

这是一个 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