Блог

Я хочу установить границу для первых 3 букв, а не только для первой.

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

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

Кажется, невозможно использовать только 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> 

Вы можете использовать :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>