CSS - 边框底部长度固定为60％

Question

我需要有关边框底部长度的帮助。我想将border-bottom长度设置为60％。我可以使用内部div这样做：

#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>

但我不想将它与额外的div一起使用，我想使用border-bottom来实现它，我在google和stack中搜索它但没有运气。

提前致谢。

Answer 1

您可以像这样使用pseudo element：

#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>