Underline “reverse” effect

HTML & CSS
1

I’d like to add an animation to my links (tag a), like this, but with a difference. The transition should not make visible an invisible underline, but animate an existing underline.
What code should I use.
You can see my website (and the existing css) here. Anyway I add here the “a” section:


a[href]:hover {
  text-decoration: inherit; }

a[href]:hover, a[href]:link, a[href]:visited, v[href]:link {
  color: var(--mattone);
  font-weight: bold; }

a {
  color: var(--mattone);
  font-weight: bold; }

Thank you!

1 Like
2

Maybe I was not too clear. I mean: I’d like an effect that make a) before (on hover) invisible the undeline, and b) after re-make it visible but with the transition effect.
This, because it seems to me that a link without underline maybe not be recognized as link…

3

Did you mean like this?

2 Likes
4

Exactly. Thank you! :+1:
But meanwhile I realized something different, as you can see on the same link.
I will think if and how mix the two effects.

1 Like
5

But I have a problem: how to avoid to underline some a elements. In particular in my homepage I’d like to have links without underline.

My present code:

/* transition BEGIN */
a:not(.logo){
  background-image: linear-gradient(var(--verde-chiaro), var(--verde-chiaro) /*#d99a5a, #d99a5a*/);
  background-size: 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  color: white;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 100%;
  color: white !important;
}

a {
  text-decoration: none;
}

/* transition END */

a[href]:hover {
  /*text-decoration: inherit;*/ }

a[href]:hover, a[href]:link, a[href]:visited, v[href]:link {
  color: var(--mattone);
  font-weight: bold; }

a {
  color: var(--mattone);
  font-weight: bold; }

My website (I repeat again): www.culturanuova.net

6

The underline seems to be a background gradient effect so the best method would be to add a class to the links you want to remain normal.

e.g.

<a href="#" class="basic">

Then you could over-ride them with important like this:

a.basic,
a.basic:hover{
background:inherit!important;;
color:inherit!important;
}

I used !importrant because you have several rules of different widths targeting the anchors so you need to art least match the weight and then you can remove important

Alternatively you could add the basic class as mentioned above and then in every rule where you have taergetted the anchor you could use:not(.basic) as you have done for the logo.

Lastly if all the links you want to target are in a separate section then you can use the section class to remove the properties as required.

Your options are basically.

  1. Add a class;

  2. Or target by context if possible.

.