Temporary pseudo-element that appears upon hovering

My animated arrows, implemented using pseudo elements, are experiencing an unusual behavior. When the link is hovered over, the arrows animate smoothly. However, upon leaving the link, a pseudo element briefly appears in the top left corner of the screen before disappearing. I'm puzzled as to why this is happening and which piece of code is causing it.

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>

htmlcss

Answer №1

It appears that everything is going awry due to some CSS being placed in the wrong location...

.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 aforementioned CSS, you've applied styles within the hover pseudo class. Simply adjust the width property within hover, while leaving the rest of the CSS untouched as shown 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align a text box and button in the center with precision using Bootstrap 5

Here is the code snippet using bootstrap 5: <div style="margin-top: 30%" class="text-center"> <h1>Let's get started...</h1> <input id="form-input" style="display: inline-block;" ...

cssbootstrap-5

Tips on displaying one <dl> when hovering over another <dl> element

After spending a solid 3 hours searching without success, I am feeling incredibly frustrated and in need of assistance. Below is my HTML code: <div class="dropdown-content"> <dl class="subDL"> <dt><a href="#">- ...

htmlcss

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

javascripthtmlangularjs

What can be achieved by combining Text Wrangler and terminal?

I'm curious about how to open an index.html file in terminal. For instance, I know that using sublime works like this: sublime index.html But what about textWrangler? And in general, how do I locate similar commands like "sublime" for any program of ...

htmlterminaltextwrangler

Placing an anchor around a div extends its clickable area beyond the div

Just starting out with programming and I'm running into a problem where the anchor is clickable outside of my div. The div includes a sliding tab from the right displaying a randomly generated film, and ideally the entire tab should be clickable to d ...

javascriptjqueryhtmlcss

Using JavaScript to conceal the browser's interface leads to a flaw with the position: fixed property specifically

Check out my website: On this site, there is a fixed position div #nav. In order to optimize the site for mobile, I am using JavaScript to hide the browser's chrome. Here's the code snippet: setTimeout(function() { window.scrollTo(0, 1) }, 10 ...

cssiosmobile

Is it possible to display an unordered list upon clicking a button without relying on CSS and still achieve identical visual outcomes?

Within the responsive CSS of my web application, I am attempting to display the ul element inside the "mobile header" only upon clicking the "Connect Wallet" button. I want it to appear and disappear again as soon as anything else is clicked. Is there a w ...

javascripthtmlcssmedia-queriescss-grid

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

Resolving the "TypeError: $ is not a function" issue on a custom WordPress page

I developed a unique WordPress page using a custom plugin, where I aim to switch comments on and off with the following code: <script type="text/javascript> $("comment_switch").click(function () { $("comments").toggleClass("hidden"); }); < ...

jqueryhtmlwordpress

Tips for converting a toolbar into a side navigation bar when resizing the window (shrinking)?

Check out this example When the browser is maximized, it should show the toolbar and its content. However, if the browser window is resized, a new side nav bar should appear. How can I implement this feature? How do I utilize media queries to achieve this ...

htmlcssangularangular-material2

Select an image from the browser using JavaScript, adjust its size, and then transmit it to the server. Finally, utilize PHP to properly save the image

I am currently tackling the challenge of implementing a classical feature where users can select a file in their browser ("Browse"), have JavaScript resize it to a maximum width/height of 500 pixels, upload it to the server, and then save it to disk using ...

javascriptphpjqueryhtmlfile-upload

Angular: Ensuring Paypal button does not display twice without a hard reload

I have encountered an issue with a PayPal payment button on my page. The button displays fine when I generate it for the first time, but if I try to generate it again for another order, it doesn't show up. I have to hard reload the page to get it to w ...

htmlangulartypescriptionic-frameworkpaypal

I am experiencing an issue with my divs displaying an undesired white border on mobile screens

Having a challenge with the layout of my website when viewed on mobile devices or in Chrome's developer mobile tools. The two divs at the top of the page are producing a thin white border, which is not visible in regular browser view. Initially faced ...

htmlcss

Using Flexbox to ensure two elements do not appear next to each other

When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Tha ...

javascripthtmlcsslayoutflexbox

Creating independent Javascript applications and HTML5 canvas games, optimized for V8 or tailored to the specific browser for optimal performance

Instead of solely targeting Chrome users due to browser performance issues, I am exploring alternative options to create an executable version of a canvas game. Is there a way to integrate v8 for non-Chrome users? Perhaps a web "wrapper" similar to Flash&a ...

javascripthtmlv8

Vue.js - Including new information in an array and passing it to the props (assistance needed)

I am facing an issue where I want my component to be able to add a new sidebar menu item every time the user clicks an add button. Essentially, my component should appear when the user is defining their own sidebar menu items. Here is the Vue.js code that ...

htmlvue.js

Is the HTML5 video backup image misplaced?

Here is the HTML I created to showcase a video background with two fallback images for mobile and old browsers: <div> <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <!--<source s ...

javascripthtmlcss

Spring Boot - delivering unadulterated HTML and static materials

After spending countless hours working on this, I am still unable to figure out how to serve pure .html pages. The project I am referring to can be found at: https://github.com/robson021/Invoice-Writer Although the Thymeleaf engine works perfectly, I enco ...

javahtmlspringspring-mvcconfiguration

What methods can I employ to dynamically style SVG elements that have been generated programmatically?

Utilizing a js library called mermaid to create svg on a webpage, I am in need of dynamically applying styling to specific parts of the svg when users activate different commands through keyboard shortcuts. Specifically, I aim to highlight the element in t ...

javascriptcsssvgmermaid

What is causing the extra space in Flexbox layout?

Currently, I am in the process of coding a layout that requires me to evenly distribute cards next to each other in rows using flex. However, I am encountering an issue with spacing on the right side and I cannot pinpoint the exact reason behind it. After ...

htmlcssbootstrap-4