CODEWITHSUNDEEP
htmlcss
Emma Marshall
Emma Marshall

Reputation: 352

Hover on anchor link and show icon

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

Upvotes: 3

Views: 3823

Answers (4)

pso
pso

Reputation: 523

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>

Upvotes: 2

zer00ne
zer00ne

Reputation: 43860

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>📃📄📜📔📕📖📗📘📑📚🧾📒📓

Upvotes: 3

scaff
scaff

Reputation: 330

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>

Upvotes: 5

deekeh
deekeh

Reputation: 752

: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.

Upvotes: 1

Related Questions