Hover on anchor link and show icon

user_17788846 0
Viewed 522

I'm trying to copy the CSS on those "documentation" pages of those projects such as bootstrap where when you hover on anchor link(s) it would show you a certain icon

a {
font-weight: bold;
font-size: 20px;
color: #000000;
text-decoration: none;
}

/* mouse hover link */
a:hover {
  background: url(https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/copy-icon.png);
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 200px 50%;
  background-attachment: scroll;
}
<a href="#">Some Random Header Text</a><br>
<a href="#">Some Random Header Text but Longer</a>

I want the icon to show at the right end of the text for the both instances of anchor link when hover unto them how can I achieve it?

Here's an expected result:

expected result

css html
4 Answers

a {
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
}

/* mouse hover link */
a:hover::after {
  background: url(https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/copy-icon.png);
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
}
<a href="#">Some Random Header Text</a><br>
<a href="#">Some Random Header Text but Longer</a>

user_61554060

You could add another element like span after a and use the sibling selector +.

a {
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
}

span {
  display: inline-block;
  width: 15px;
  height: 15px;
}


/* mouse hover link */

a:hover+span {
  background: url(https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/copy-icon.png);
  background-size: cover;
}
<a href="#">Some Random Header Text</a><span></span><br>
<a href="#">Some Random Header Text but Longer</a><span></span>

user_169329800

Background images are a pain to position especially when dealing with text as well. Try Unicode chracters which are are just like text which means they sit perfectly with text.

Sorry, I forgot to mention, ::aftter and content makes this possible and the Unicode (from OS) is made easy by a simple copy and paste from here.

a {
  display: block;
  margin: 5px 0;
  font-weight: bold;
  font: 2ch/1.5 'Segoe UI';
  color: #000000;
  text-decoration: none;
}

.A:hover::after {
  content: '';
}

.B:hover::after {
  content: ''
}

.C:hover::after {
  content: '';
}

.D:hover::after {
  content: '';
}
<a href="#" class='A'>Some Random Header Text</a>
<a href="#" class='B'>Some Random Header Text but Longer</a>
<a href="#" class='C'>Some Random Header Text</a>
<a href="#" class='D'>Some Random Header Text but Longer</a>

user_28132240 

:root {
  --icon-size: 15px;
}

a {
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

a::after {
  content: "";
  display: none;
  height: var(--icon-size);
  width: var(--icon-size);
  background: url(https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/512/copy-icon.png);
  background-size: var(--icon-size) var(--icon-size);
  background-repeat: no-repeat;
}

a:hover::after {
  display: inline-block;
}
<a href="#">Some Random Header Text</a><br>
<a href="#">Some Random Header Text but Longer</a>

CSS Pseudo-elements and Pseudo-classes

You can use the CSS pseudo-elements to put an image/icon after the content. Since you want the icon to appear after the content, you can use pseudo-element ::after and put a background image after the text and give it a display from none to anything else, preferably inline-block to make it appear only on hover using CSS pseudo-class :hover.

Note: You don't really require to use the ::after pseudo-class here. You can just tack in an actual element like a span and apply all those styles to it, just that using ::after makes it look cleaner.

user_127615860
Related