html - CSS 设置 ::before 宽度等于内容

Question

我有一个span里面的文本和::before伪元素。我需要将宽度设置为::before等于的宽度span。它将是文本的下划线。

<li class="menu-list-item">
  <a href="index.html">
    <span>Home</span>
  </a>
</li>

我已经使用 JS 完成了这项工作（通过将宽度设置为li），但我需要一个 CSS 解决方案。我知道我可以设置left:0; right:0;，但我需要准确设置宽度

标签： htmlcss

Answer 1

那是你需要的吗？

.menu-list-item a span {
  display: inline-block;
  position: relative;
}

.menu-list-item a span::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}

代码笔示例