Css hover after: css — How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?

html — Что такое :hover::after?

спросил 1 год, 1 месяц назад

Изменено 1 год, 1 месяц назад

Просмотрено 1к раз

Я следил за учебным пособием на YouTube, в котором использовался эффект наведения CSS, поэтому, когда вы наводите курсор на элементы панели навигации, линия постепенно появлялась из центра. Как работает :hover::after?

Это код CSS, который они показали в видео:

 nav{
  дисплей: гибкий;
  набивка: 2% 6%;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  положение: липкое;
}
навигационное изображение{
  ширина: 150 пикселей;
}
.nav-ссылки{
  гибкий: 1;
  выравнивание текста: вправо;
  зазор: 2рем;
}
.nav-ссылки ул ли {
  стиль списка: нет;
  отображение: встроенный блок;
  отступ: 8px 12px;
  положение: родственник;
}
.  nav-ссылки на ли {
  цвет: #ffffff;
  размер шрифта: 13px;
  текстовое оформление: нет;
}
.nav-links ul li a::after{
  содержание: '';
  ширина: 0%;
  высота: 2 пикселя;
  фон: #f44336;
  дисплей: блок;
  маржа: авто;
  переход: 0,5 с;
}
.nav-links ul li a:hover::after{
  ширина: 100%;
}```
 

• html
• css
• css-переходы

2

::after и :hover являются псевдоэлементами. Если у вас есть: hover, следующие стили будут применяться к элементу при наведении на него курсора. Но когда у вас есть: hover:: after, следующие стили будут применяться к псевдоэлементу :: after при наведении курсора на элемент. В этом случае псевдоэлемент ::after представляет расширяющуюся строку. И кстати, чтобы было понятно, что такое ::after, в CSS с помощью

0

При наведении курсора на элемент в теге case вы применяете стиль к псевдоэлементу ::after. В примере кода я вижу, что вы даете псевдоэлементу значение 100%, и таким образом вы меняете начальное значение ширины, равное 0,9.0005

 a:hover::before {
    // Свойство CSS
}
а: наведение :: после {
    // Свойство CSS
}