CODEWITHSUNDEEP
csshyperlinkclick
Sarbbottam
Sarbbottam

Reputation: 5580

Style a clicked link - Any CSS only solution?

Is there any CSS only solution to style a clicked link, which could provide feedback to the user, that the link has been clicked and its taking the desired action.

I could use JavaScript listen to click event and a desired class to provide feedback. However a CSS only feedback will be better if any.

Any pointer would be of great help.

Something like below is desired.

link feedback demo

Please refer this pen for a working demo/simulation of the desired behavior.

Upvotes: 2

Views: 6610

Answers (1)

service-paradis
service-paradis

Reputation: 3398

It is difficult using a element to made something like this to works using CSS only across different browsers.

Here is workaround that can give you the expected result using a radio button.

If you make a hidden radio button with an associated label style just like a link. You could use CSS pseudo :checked to give a desired result.

Code like this:

input[type=radio] {
    display:none
}

input[type=radio] + label {
    color:blue;
    text-decoration:underline;
    cursor:pointer
}

input[type=radio]:checked + label {
    color:red
}
input[type=radio]:checked + label:after {
    content:url('https://forums.adobe.com/images/jive-image-loading.gif')
}
  <input type="radio" value="" id="myRadio" />
  <label for="myRadio">
      Click me!
  </label>

Here is a jsfiddle

============ Below is my answer before updated OP ============

a element in css have many pseudo selectors. You can use them to know if the link gets hovered, has been clicked, is clicked right now.

There are 4 link states:

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

See this fiddle to view those different selectors in action

Upvotes: 1

Related Questions