css悬停时在li的前3个字符上设置边框底部

Question

我想在 前 3 个字母 上设置边框，而不仅仅是第一个。

li:hover::first-letter{
  border-bottom: 2px solid #759d00
}

<ul>
  <li>School</li>
  <li>University</li>
  <li>Kindergarden</li>
</ul>

Answer 1

您可以像这样使用 :after 选择器而不是 border

li:after {
  content:"";
  background: #759d00;
  width: 0;
  height: 2px;
  display:block;
  transition: width 0.4s;
}
li:hover:after{
  display:block;
  width: 1.5em;
}

<ul>
  <li>School</li>
  <li>University</li>
  <li>Kindergarden</li>
</ul>

Answer 2

似乎没有办法仅使用 CSS 可靠地挑选出前 3 个字符（即处理所有字体设计可能性和所有字体大小以及所有字符组合），除非我们放置一个伪元素在每个元素上，每个元素的前 3 个字符作为内容，看起来很乱。

如果允许更改 HTML，那么像这样更简单的方法将起作用——将前 3 个字符包装在一个范围内。如果需要，您可以在运行时间使用 JS 执行此操作。

li:hover span{
  border-bottom: 2px solid #759d00
}

<ul>
  <li><span>Sch</span>ool</li>
  <li><span>Uni</span>versity</li>
  <li><span>Kin</span>dergarden</li>
</ul>

css悬停时在li的前3个字符上设置边框底部

css set border bottom on first 3 character of li when hover

css

border

hover