在填充之前的css border-bottom

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>

更新小提琴