add a moving chevron to your href link

this adds a right chevron that moves when the link is active

demo:

* note: this may not show up in light mode as the chevron is white, so would need to change the color it

HTML

<a href="#!" class="chev-right">my link text</a>

CSS

.chev-right {
	position:relative;
}
.chev-right:hover:before {
  right: -25px;
}
.chev-right:before {
  position: absolute;
  content: "";
  color: #48bbe8;
  top: 5px;
  right: -20px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  height:16px;
  width:16px; 
  color:#FFF;
}

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 237 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
All of humanity's problems stem from man's inability to sit quietly in a room alone, wrote Blaise Pascal.
Unknown