Rivnat Nasah Rivnat Nasah - 6 months ago 18
CSS Question

CSS - Border bottom length fixed to 60%

I need help on border-bottom length. I want to set border-bottom length to 60%. I can do it using the inner div like:



#myDiv {
background: #FED;
_border-bottom: 5px solid red;
}
#myDiv div {
margin: 5px 0px;
width: 60%;
height: 5px;
background-color: red;
}

<div id="myDiv">
My div
<div></div>
</div>





But i don't want to use it with extra div, I want to achieve it using border-bottom, I search for this in google and stack but no luck.

Thanks in advance.

Answer

You can use pseudo element like this:

#myDiv {
  background: #FED;
  position: relative;
  
}
#myDiv::after {
  content: "";
  width: 60%;
  height: 5px;
  background: red;
  position: absolute;
  bottom: -5px;
  left: 0;
}
<div id="myDiv">
  My div
</div>

Comments