Как сделать так, чтобы изображение появлялось под активной ссылкой?

Question

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

Answer 1

Это можно сделать только с псевдоэлементом css ::after.

html

<ul>
  <li class="item" data-icon="❤️">menu text</li>
</ul>

css

.item:hover::before {
  content: attr(data-icon);
}

Вы можете просто использовать любой смайлики для иконок в этом случае вот полный пример

Answer 2

Есть несколько способов сделать это, самый простой и самый ненавязчивый - это решение без JS.

Я загружаю шрифт с логотипом cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

.ссылка выглядит в разметке следующим образом:

<a class="active" href="#">Home<i class="fa fa-home"></i></a> 

Здесь я устанавливаю непрозрачность для элемента i на 0 и задаю ему переход:

i {
color: violet;

opacity: 0;
position: relative;
left: 20px;

transition: all 0.5s;
}

И, наконец, вы устанавливаетеЧто касается ссылок при наведении, вы можете пометить дочерние элементы в CSS с помощью ">"

a:hover > i {
opacity: 1;
transform: rotate(360deg);
}

Вот и все, вот ссылка:

https://codepen.io/damPop/pen/zMzBGN?editors=0110