Clever Geek Handbook

Css border-bottom before filling

Is it possible to apply a border-bottom

before padding

without inserting an immediate element, i.e. within the block itself content

? For example, below I have created a wrapper div

with s3

in the class. Can I avoid this?

Here's 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>
Run code


I have been looking for solutions for this, which makes me think it is not possible. I don't mind using any solution unless it requires me to position the elements relatively or absolutely. The thought CSS pseudo-element might allow me to do this, but it doesn't.

+3


source to share


1 answer


You can of course 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>
Run code


Updated Fiddle

+11


source






More articles:


All Articles