CSS - 边框底部长度固定为 60% [重复]

【问题标题】：CSS - Border bottom length fixed to 60% [duplicate]CSS - 边框底部长度固定为 60% [重复]
【发布时间】：2016-06-02 04:18:55
【问题描述】：

我需要关于边框底部长度的帮助。我想将边框底部长度设置为 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 一起使用，我想使用边框底部来实现它，我在谷歌和堆栈中搜索它但没有运气。

提前致谢。

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

谢谢，但您错过了display: block 属性..
没有display: block，只使用位置..太棒了。哪个最好？？ display 或 position??
您可以自行选择使用。