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

Question

I want to set the border on the first 3 letters not only the first.

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

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

Answer 1

You can use :after selector instead of border like this

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>