<div class="arrow-1">1. Hover me </div>
<div class="arrow-2">2. Hover me </div>
<div class="arrow-3">3. Hover me </div>
<div class="arrow-4">4. Hover me </div>
<div class="arrow-5">5. Hover me </div>
<div class="arrow-6">6. Hover me </div>
<div class="arrow-7">7. Hover me </div>
.arrow-1 {
   padding:10px;
   background:
    conic-gradient(from -135deg,currentColor 90deg,#0000 0) var(--p,-8px) 100%/16px 16px,
    linear-gradient(90deg,currentColor calc(100% - 8px),#0000 0)  bottom 6px left 0/var(--d,0%) 3px;
   background-repeat: no-repeat;
   transition: 0.5s; 
 }
 .arrow-1:hover {
   --d:100%;
   --p:calc(100% + 8px);
 }
 .arrow-2 {
   padding:10px;
   background:
    conic-gradient(from 45deg,currentColor 90deg,#0000 0) var(--p,calc(100% + 8px)) 100%/16px 16px,
    linear-gradient(-90deg,currentColor calc(100% - 8px),#0000 0)  bottom 6px right 0/var(--d,0%) 3px;
   background-repeat: no-repeat;
   transition: 0.5s; 
 }
 .arrow-2:hover {
   --d:100%;
   --p:-8px;
 }

  .arrow-3 {
   padding:10px;
   background:
    conic-gradient(from -135deg,currentColor 90deg,#0000 0) left var(--p,-8px) bottom 0,
    linear-gradient(90deg,currentColor calc(100% - 7px),#0000 0)  bottom 6px left 0,

    conic-gradient(from   45deg,currentColor 90deg,#0000 0) right var(--p,-8px) bottom 0,
    linear-gradient(-90deg,currentColor calc(100% - 7px),#0000 0)  bottom 6px right 0;
   background-size:  16px 16px,var(--d,0%) 3px;
   background-repeat: no-repeat;
   transition: 0.5s; 
 }
 .arrow-3:hover {
   --d:50%;
   --p:calc(50% - 2px);
 }
   .arrow-4 {
   padding:10px;
   background:
    conic-gradient(from -135deg,currentColor 90deg,#0000 0) right var(--p,calc(50% - 20px)) bottom 0,
    linear-gradient(-90deg,currentColor 0 0)  bottom 6px center,
    conic-gradient(from   45deg,currentColor 90deg,#0000 0) left  var(--p,calc(50% - 20px)) bottom 0;
   background-size:  16px 16px,var(--d,25px) 3px;
   background-repeat: no-repeat;
   transition: 0.5s;
 }
 .arrow-4:hover {
   --d:calc(100% - 16px);
   --p:-8px;
 }

.arrow-5 {
   padding:10px;
   background:
    conic-gradient(from -135deg,currentColor 90deg,#0000 0) var(--p,-8px) 100%/16px 16px,
    repeating-linear-gradient(90deg,#0000 0 5px,currentColor 0 10px)  bottom 6px left 0/var(--d,0%) 3px;
   background-repeat: no-repeat;
   transition: 0.5s; 
 }
 .arrow-5:hover {
   --d:calc(100% - 8px);
   --p:calc(100% + 8px);
 }

 .arrow-6 {
   padding:10px;
   background:
    conic-gradient(from 45deg,currentColor 90deg,#0000 0) var(--p,calc(100% + 8px)) 100%/16px 16px,
    repeating-linear-gradient(-90deg,#0000 0 5px,currentColor 0 10px)  bottom 6px right 0/var(--d,0%) 3px;
   background-repeat: no-repeat;
   transition: 0.5s; 
 }
 .arrow-6:hover {
   --d:calc(100% - 8px);
   --p:-8px;
 }

  .arrow-7 {
   padding:10px;
   background:
    conic-gradient(from 135deg at top,currentColor 90deg,#0000 0) left 50% bottom calc(8px + var(--p,-16px))/16px 8px,
    linear-gradient(90deg,currentColor 3px,#0000 0)  left calc(50% + 6px) bottom var(--p,-16px) /16px 10px;
   background-repeat: repeat-x;
   transition: 0.5s; 
 }
 .arrow-7:hover {
   --p:0px;
 }

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.