填充前的css border-bottom

穆罕默德·巴纳(Mohamed Bana)

是否可以border-bottompadding不插入立即元素的情况下(即在content框本身内)应用before 例如,下面我创建了一个包装divs3的类。我可以避免吗?

这是一个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伪元素可能允许我这样做,但事实并非如此。

芜菁

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

.item {
    margin: 15px;
    padding: 15px;
    background: #f2f2f2;
}

.item:after {
    content: "";
    display: block;
    border-bottom: 1px solid blue;
}
<div class="item">
  Hello!
</div>

更新小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章