CODEWITHSUNDEEP
htmlcss
user38208
user38208

Reputation: 1094

Pseudo Element appearing momentarily after hover

I have animated arrows constructed with pseudo elements. When the link is hovered over, the arrows animate well but when the mouse leaves the link, there is pseudo element appearing on the top left of the screen for a brief moment after which it disappears. I am not able to figure why this is happening and which code is making this happen?

body {
  background: black;
}

.animated-arrow {
  color: #fff;
  text-decoration: none;
}

.the-arrow {
  width: 64px;
  transition: all 0.2s;
}

.main .text {
  padding: 0px 10px;
}

.left-arrow-float .the-arrow .shaft:before,
.left-arrow-float .the-arrow .shaft:after {
  background-color: #fff;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s;
  transition-delay: 0;
}


/**************************************************/

.left-arrow-float .the-arrow.-left .shaft {
  width: 64px;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft:before {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft:after {
  width: 0px;
}

.left-arrow-float .the-arrow.-right .shaft {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft {
  width: 64px;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.left-arrow-float .the-arrow.-right .shaft:before {
  width: 0px;
}

.left-arrow-float .the-arrow.-right .shaft:after {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft:before {
  width: 8px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft:after {
  width: 8px;
}

.left-arrow-float .the-arrow .shaft:before {
  -webkit-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(45deg);
  transition-delay: 0.3s;
}

.left-arrow-float .the-arrow .shaft:after {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  transform: rotate(-45deg);
  transition-delay: 0.3s;
}

.left-arrow-float .the-arrow.-left .shaft:before,
.left-arrow-float .the-arrow.-left .shaft:after {
  width: 8px;
}
<div class="left-arrow-float">

  <a class="animated-arrow arrow-c-f" href="#">

    <div class="left-arrow">

      <span class="main">
        <span class="the-arrow -left">
          <span class="shaft"></span>
      </span>

      <span class="text">
          Some Text
        </span>

      </span>

      <span class="the-arrow -right">
        <span class="shaft"></span>
      </span>
    </div>

  </a>
</div>

Upvotes: 2

Views: 92

Answers (1)

sbrrk
sbrrk

Reputation: 894

This is all happening because you set some CSS at the wrong place...

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft {
  width: 64px;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

in the above css you set everythings on hover. you just need to set width on hover rest of the css will goes normally like below..

.left-arrow-float .the-arrow.-right .shaft {
  width: 0px;
  position: relative;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  transition: all 0.2s;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft {
  width: 64px;

}


body {
  background: black;
}

.animated-arrow {
  color: #fff;
  text-decoration: none;
}

.the-arrow {
  width: 64px;
  transition: all 0.2s;
}

.main .text {
  padding: 0px 10px;
}

.left-arrow-float .the-arrow .shaft:before,
.left-arrow-float .the-arrow .shaft:after {
  background-color: #fff;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s;
  transition-delay: 0;
}


/**************************************************/

.left-arrow-float .the-arrow.-left .shaft {
  width: 64px;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft:before {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-left .shaft:after {
  width: 0px;
}

.left-arrow-float .the-arrow.-right .shaft {
  width: 0px;
  position: relative;
  transition-delay: 0.1s;
  background-color: #eaeaea;
  height: 2px;
  display: inline-block;
  transition: all 0.2s;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft {
  width: 64px;
  
}

.left-arrow-float .the-arrow.-right .shaft:before {
  width: 0px;
}

.left-arrow-float .the-arrow.-right .shaft:after {
  width: 0px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft:before {
  width: 8px;
}

.left-arrow-float .animated-arrow:hover .left-arrow .the-arrow.-right .shaft:after {
  width: 8px;
}

.left-arrow-float .the-arrow .shaft:before {
  -webkit-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(45deg);
  transition-delay: 0.3s;
}

.left-arrow-float .the-arrow .shaft:after {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  transform: rotate(-45deg);
  transition-delay: 0.3s;
}

.left-arrow-float .the-arrow.-left .shaft:before,
.left-arrow-float .the-arrow.-left .shaft:after {
  width: 8px;
}
<div class="left-arrow-float">

  <a class="animated-arrow arrow-c-f" href="#">

    <div class="left-arrow">

      <span class="main">
        <span class="the-arrow -left">
          <span class="shaft"></span>
      </span>

      <span class="text">
          Some Text
        </span>

      </span>

      <span class="the-arrow -right">
        <span class="shaft"></span>
      </span>
    </div>

  </a>
</div>

Upvotes: 1

Related Questions