css border-bottom before padding

Question

Is it possible to apply a border-bottom before padding without inserting an immediate element, i.e., within the content box itself? For example, below I created a wrapper div with s3 on the class. Can I avoid this?

Here is a 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>

I've been searching around for a solution to this which leads me to think it's not possible. I don't mind using any solution as long as it does not require me positioning items relatively or absolutely. Thought CSS pseudo-element might allow me to do this but it doesn't.

Answer 1

You certainly can do this with a pseudo element.

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

.item:after {
    content: "";
    display: block;
    border-bottom: 1px solid blue;
}

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

Updated Fiddle