CODEWITHSUNDEEP
css-transitionspseudo-element
Ivan Topić
Ivan Topić

Reputation: 3185

Is it possible to set transition delay on :after?

How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.

Here is the Fiddle

Upvotes: 0

Views: 79

Answers (2)

Asons
Asons

Reputation: 87292

Maybe if you do something like this, where you first set up the :after and then show it on :hover

body {
  background-color: #f01;
}

ul {
  background-color: #fff;
}

li {
  position: relative;
  list-style-type: none;
  display: inline;
  line-height: 2em;
  padding: 5px;
  transition: all 1s;
}

li:hover {
  background-color: #414C52;
  transition: all 1s;
}

li:after {
  top: 25px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #414C52;
  margin-left: -10px;
  transition: all 1s;
  border-width: 10px;
  opacity: 0;
}

li:hover:after {
  opacity: 1;
  transition: all 1s;
}

a {
  padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
  <li><a href="#">asdfasdf</a></li>
  <li class="active"><a href="#">ffffft</a></li>
</ul>

Upvotes: 1

Kevin
Kevin

Reputation: 1250

yes, it should do it but you need an inital li:after before your li:hover:after

Upvotes: 0

Related Questions