How to add CSS on specific element while using pseudo-class or pseudo element

Question

This are 5 pieces a href and when hover unto them Hello World!! would show up unto there rigth side.. How can I make Hello World!!only show on Only Here when hover? Is there like

<a style =":hover::after display: inline-block; content: "Hello World!!"; font-size: 16px; ... etc " href="#">

POC coding argument of some sort to design specific element while using pseudo-class or pseudo element

a:hover::after {
  display: inline-block;
  content: "Hello World!!";
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
}

<a href="#">Not Here</a><br>
<a href="#">Not Here</a><br>
<a href="#">Only Here</a><br>
<a href="#">Not Here</a><br>
<a href="#">Not Here</a><br>

I'm having trouble with your English. Please revise to be more clear about what you want to behave differently. Also, I'm not sure what the first code example is for. Inline styles are ugly and can't contain selectors. — isherwood
– isherwood, Commented Feb 10, 2022 at 14:17

Razvan Zamfir · Accepted Answer · 2022-02-10 14:19:17Z

4

Is this what you want to chieve?

a.hello:hover::after {
  display: inline-block;
  content: "Hello World!!";
  font-size: 16px;
  font-weight: bold;
  padding-left: 5px;
}

<a href="#">Not Here</a><br>
<a href="#">Not Here</a><br>
<a class="hello" href="#">Only Here</a><br>
<a href="#">Not Here</a><br>
<a href="#">Not Here</a><br>

answered Feb 10, 2022 at 14:19

Razvan Zamfir

4,8107 gold badges51 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emma Marshall Over a year ago

I understand the concept now so i just used #id or .class of the element depending on availability?? also the snippet you provided i can remove a from a.hello:hover and left with .hello:hover which still work as expected so a is optional??

Razvan Zamfir Over a year ago

Yes, you can do all that. Try it.

Collectives™ on Stack Overflow

How to add CSS on specific element while using pseudo-class or pseudo element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related