After hover css: Сочетание с псевдоклассами | WebReference

Разное 

::after — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Денис Ежков советует
    2. Егор Левченко советует

Кратко

Скопировано

Когда мы в CSS добавляем ::after к селектору, для соответствующего элемента создаётся псевдоэлемент). Этот псевдоэлемент — его самый последний, он идёт после всего внутреннего содержимого.

Пример

Скопировано

a::after {  content: "→";}
          a::after {
  content: "→";
}

Как пишется

Скопировано

::after {  /* Для CSS 3 */}:after {  /* Для CSS 2 */}
          ::after {
  /* Для CSS 3 */
}
:after {
  /* Для CSS 2 */
}

💡 В CSS 3 ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.

Как понять

Скопировано

Проще всего воспринимать псевдоэлемент ::after как дополнительный элемент в конце тега. Мы можем применить к нему любые стили.

Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое после текста, либо выступая в роли дополнительного стилизованного блока.

По умолчанию псевдоэлемент ::after является инлайновым.

Самый простой пример использования

::after вместе с ::before — оформление текстового содержимого:

<article>  <h2>    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об    <span>ароматах</span> классики  </h2>  <p>«Все кидаются в лопухи, в крапиву...»</p>  <p>«Лето Господне», Иван Шмелев</p></article>
          <article>
  <h2>
    «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об
    <span>ароматах</span> классики
  </h2>
  <p>«Все кидаются в лопухи, в крапиву.

  
 ..»</p>
  <p>«Лето Господне», Иван Шмелев</p>
</article>

.accent::before,.accent::after {  content: "🌸";  vertical-align: middle;  font-size: 0.6em;}.accent::before {  margin-right: 0.1em;}.accent::after {  margin-left: 0.1em;}
          .accent::before,
.accent::after {
  content: "🌸";
  vertical-align: middle;
  font-size: 0.6em;
}
.accent::before {
  margin-right: 0.1em;
}
.accent::after {
  margin-left: 0.1em;
}
Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Не забывайте прописывать свойство content для псевдоэлемента ::after. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Псевдоэлементы ::before и ::after можно использовать и для более сложной стилизации:

<a href="#">выбери меня</a>
          
 
<a href="#">выбери меня</a>

. link {  position: relative;}.link::before,.link::after {  content: "";  height: 14px;  width: 14px;  position: absolute;  transition: all 0.6s;}.link::before {  top: 0;  left: 0;  border-top: 6px solid #000000;  border-left: 6px solid #000000;}.link::after {  bottom: 0;  right: 0;  border-bottom: 6px solid #000000;  border-right: 6px solid #000000;}.link:hover::before,.link:hover::after {  width: 100%;  height: 100%;  transition: all 0.3s;}
          .link {
  position: relative;
}
.link::before,
.link::after {
  content: "";
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all 0.6s;
}
.link::before {
  top: 0;
  left: 0;
  border-top: 6px solid #000000;
  border-left: 6px solid #000000;
}
.link::after {
  bottom: 0;
  right: 0;
  border-bottom: 6px solid #000000;
  border-right: 6px solid #000000;
}
.link:hover::before,
.link:hover::after {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
Открыть демо в новой вкладке

В этом примере рамки применены к псевдоэлементам ::before и ::after.

При этом сами псевдоэлементы используются как два дополнительных стилизуемых элемента внутри ссылки <a>. Круто, правда? В HTML пишем один тег, а по факту можем стилизовать аж три! 🤘

Егор Левченко советует

Скопировано

🛠 Псевдоэлемент ::after можно использовать и для того, чтобы вывести важную информацию во время печати. Например, содержимое ссылок, которые есть на странице:

<a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>
          <a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>

 
@media print {  a {    text-decoration: none;  }  a::after {    content: " (ссылка: " attr(href) ")";  }}
          @media print {
  a {
    text-decoration: none;
  }
  a::after {
    content: " (ссылка: " attr(href) ")";
  }
}

Тогда на печати мы получим следующее:

Открыть демо в новой вкладке Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

::before

ctrl + alt + ←

Следующий материал

→

content

ctrl + alt + →

Как совместить :after с :hover?

html

3 недели назад

от Abdul Moeed

Селектор «:after» часто используется для добавления содержимого к элементу, по умолчанию содержимое отображается в той же строке после элемента. «:hover» используется с элементом для выполнения определенных стилей при наведении курсора мыши пользователем. Оба используются для создания интерактивного веб-сайта и помогают поддерживать лучшее взаимодействие с пользователем.

В этой статье демонстрируются различные способы объединения :after с селектором :hover.

    • Как объединить :after с :hover?
    • Использование селектора :after
    • Использование селектора :hover
    • Объединить :after с селекторами :hover

Как объединить :after с :hover?

Селекторы CSS « :after » и « :hover » можно использовать в комбинации для добавления содержимого или стиля к элементу. Чтобы объединить их обоих, напишите их в одной строке, а перед записью селектор элемента или класс этого элемента HTML.

Использование селектора :after

Селектор « :after » добавляет содержимое после выбранного элемента HTML. Он используется для добавления данных в элементы HTML. Например, см. приведенный ниже пример.

Пример

В этом примере содержимое добавляется к уже существующему тегу HTML с помощью селектора :after:

Это

 
Предположим, есть элемент

а в разделе CSS добавьте текстовое содержимое после

темно-голубого цвета, используя селектор :after:

h2:after{
 content: «Linuxhint»;
 цвет: темно-голубой;
}

 
В приведенном выше фрагменте кода добавляется содержимое и устанавливается темно-голубой цвет:


Вывод содержит комбинацию элемента «

» и свойства содержимого вместе со свойством цвета CSS.

Использование селектора :hover

Селектор « hover » используется для стилизации элементов при наведении мыши. Его можно применить к каждому элементу HTML. Например, этот эффект применяется к тегу «

» в приведенном ниже примере.

Пример

Предположим, есть тег «

», к которому будет применяться эффект наведения:


 

Наведите курсор сюда


 
Теперь в части CSS прикрепите селектор при наведении к элементу HTML и добавьте свойства цвета, которые применяются при наведении:

h2:hover{
 color: darkcyan;
}

 
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:


Вывод показывает, что цвет текста меняется с черного на темно-голубой при наведении курсора мыши.

Комбинация :after с селекторами :hover

Селектор :after можно использовать с :hover для создания более интерактивного и удобного дизайна.

Пример

Например, тег «

» используется и содержит некоторые данные.

эффект наведения, написав оба селектора в одной строке:

h2:hover::after{
 content: «Linuxhint»;
 цвет: темно-голубой;
}

 
В приведенном выше фрагменте кода оба селектора написаны в одной строке вместе с элементом HTML и предоставляют значение свойства content и color.

После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:


Вывод показывает, что содержимое добавляется после наведения курсора мыши на элемент.

Заключение

Чтобы объединить селекторы :after и :hover, напишите оба на одной строке перед выбранным элементом HTML. Свойство :after добавляет значение содержимого после элемента HTML на веб-странице. Селектор :hover выбирает элемент HTML и применяет свойства CSS при наведении курсора. Эта статья успешно продемонстрировала, как комбинировать селекторы :after и :hover.

Об авторе

Abdul Moeed

Я разносторонний технический автор, который преуспевает в адаптивном решении проблем.

У меня есть талант разбивать сложные концепции на понятные термины, и мне нравится делиться своими знаниями и опытом с читателями всех уровней. Я всегда стремлюсь помочь другим расширить их понимание технологии.

Посмотреть все сообщения

CSS-анимация продолжается при наведении, если пользователь отводит мышь? — HTML и CSS — Форумы SitePoint

инструментщик 1

Привет,

У меня есть следующая анимация качания/встряхивания CSS:

jsfiddle.net

Редактировать скрипку — JSFiddle — Code Playground

Протестируйте свой JavaScript, CSS, HTML или CoffeeScript онлайн с помощью редактора кода JSFiddle.

Работает нормально, но если пользователь уводит курсор за пределы изображения, анимация останавливается.

Есть ли способ сохранить анимацию и закончить ее цикл, даже если пользователь уберет курсор?

Спасибо

PaulOB 2

мастер:

Есть ли способ сохранить анимацию и завершить ее цикл, даже если пользователь уберет курсор?

Вам понадобится JS, чтобы добавить класс к mousenter, чтобы запустить анимацию, а затем, когда мышь покинет область, удалите класс, но сначала дождитесь окончания анимации.

1 Нравится

3

…а еще лучше вообще снять обострение двадцатого века.

головка

3 отметок «Нравится»

инструмент

4

Спасибо за ответы.

Теперь я сделал это:

jsfiddle. net

Редактировать скрипку — JSFiddle — Code Playground

Протестируйте свой JavaScript, CSS, HTML или CoffeeScript онлайн с помощью редактора кода JSFiddle.

На скрипке работает, но когда добавляю на свой сайт, не работает. Проверил консоль, ошибок нет.

Кто-нибудь знает, что может вызвать это? Я пытался использовать $ вместо jQuery , но это выдает ошибки.

ТехноМедведь

5

Примечание

Анимация почти всегда должна быть управляемой пользователем или очень короткой по продолжительности . Изображения, которые постоянно анимируются, могут сделать остальную часть страницы более сложной или сделать ее полностью недоступной для пользователей с очень высоким уровнем отвлекаемости.

Критерий успеха WCAG 2.0 2.2.2 (уровень A) требует, чтобы автоматически движущееся, мигающее или прокручиваемое содержимое, которое длится более 5 секунд, могло быть приостановлено, остановлено или скрыто пользователем.

https://webaim.org/techniques/images/

2 лайков

инструментщик 6

Спасибо, @TechnoBear, возможно, я зациклюсь только один раз.

ПолОБ 7

слесарь:

, но когда я добавляю его на свой сайт, он не работает.

Нам нужно увидеть место, где это не работает

У вас есть скрипты в нужном месте (например, внизу html)? Используете ли вы совместимую версию jquery и т.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *