Transition с псевдоелементом

Question

Немного запутался. Я хочу сделать чтобы под текстом появлялось желтое подчеркивание в течении 1.5 секунд, Но появляется почему-то сразу

<p>Hello</p>


p {
transition: all 1.5s;
}


p:hover::after {
content: "";
background-color: yellow;
width: 2.4em;
height: 4px;
top: 195px;
left: 7px;
position: absolute;
}

Answer 1

Чтобы срабатывал transition, у псевдоэлемента должно быть свойство с промежуточным состоянием, например, opacity: задаёте изначально полную прозрачность, а по наведению на абзац - плавное появление

p {
  position: relative;
}
p::after {
  content: "";
  background-color: yellow;
  width: 2.4em;
  height: 4px;
  top: 95px;
  left: 7px;
  position: absolute;
  opacity: 0;
  transition: 1.5s;
}
p:hover::after {
  opacity: 1;
}

<p>Hello</p>

БЛОГ НА HUSL

Transition с псевдоелементом

Ответы (1 шт):