css下划线长度等于div

CSS 下划线长度等于 div 如何实现呢？

div {
  position: relative; /* 相对定位 */
  display: inline-block; /* 行内块级元素 */
  padding-bottom: 10px; /* 下边距 */
}

div::after {
  content: '; /* 伪元素 */
  position: absolute; /* 绝对定位 */
  width: 100%; /* 宽度为 div 的 100% */
  height: 1px; /* 下划线高度为 1px */
  background-color: #000; /* 下划线颜色 */
  bottom: 0; /* 与 div 底部对齐 */
  left: 0; /* 与 div 左侧对齐 */
} 

使用上述 CSS 代码可以实现下划线长度等于 div，因为下划线是通过伪元素 after 来创建的，这样就避免了下划线短于或长于 div 的问题。同时，使用了相对定位、行内块级元素、绝对定位等 CSS 属性，可以确保下划线与 div 对齐且在正确的位置。