Utilizing the a element to achieve a consistent look across various browsers using CSS alone can be quite challenging.
One workaround involves utilizing a radio button to achieve the desired outcome.
You can create a hidden radio button with a label styled like a link, and then use the CSS pseudo :checked selector to customize its appearance.
Here is an example of the code:
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 ============
The a element in CSS offers several pseudo selectors that can be used to style links based on different states such as hover, visited, and active.
There are 4 main link states:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user hovers over it
a:active - a link the moment it is clicked
Check out this fiddle to see these different selectors in action