Underline with transition

Question

I would like the text to underline when I hover over it, with a slight transition to make it look nice, but it underlines directly and the transition doesn't occur, what's my mistake?

.habilidades__titulo {
  text-decoration: none;
  text-align: center;
  font-size: 48px;
  color: var(--branco-principal);
}

.habilidades__titulo:hover {
  text-decoration: underline;
  transition: 2s all;
}

<a href="#" class="habilidades__titulo">
  title
</a>

please include all your codes, so that others are not confused to help — arsyaadi, Sep 26 '22 at 01:31
What sort of transition are you wanting? I had assumed you would want the line to expand from left to right on hover but others have interpreted the requirement as the color slowly fading in. — A Haworth, Sep 26 '22 at 06:16

score 1 · Answer 1 · edited Sep 26 '22 at 03:08

Issue

This problem is caused by CSS transition. Transition doesn't work for values that cannot be represented numerically: auto, display: none/block/flex, etc.

text-decoration: none <-> underline is NOT numerical. That is why your code doesn't work.

More examples:

❌height: 0 <-> height: auto
❌display: none <-> display: flex
✅height: 0 <-> height: 100vh
✅color: blue <-> color: red (Colors CAN be represented numerically)

Solution

Change text-decoration-color instead of text-decoration-line(= text-decoration in your code)

.habilidades__titulo {
  text-decoration-color: transparent; /* rgba(0, 0, 0, 0) */
  text-align: center;
  font-size: 48px;
  color: var(--branco-principal);
  transition: 2s all; /* Moved */
}

.habilidades__titulo:hover {
  text-decoration-color: inherit; /* The same color as font-color */
  /* transition: 2s all; */
}

<a href="#" class="habilidades__titulo">
  title
</a>

Transition fails when you unhover. Put transition on the element & not the hover — UmairFarooq, Sep 26 '22 at 02:59

score 0 · Answer 2 · answered Sep 26 '22 at 01:31

Use border instead and apply the transition on the border color.

.habilidades__titulo {
  text-decoration: none;
  text-align: center;
  font-size: 48px;
  color: red;
  transition: 2s border;
  border-bottom: 0.1em solid transparent;
}

.habilidades__titulo:hover {
  border-color: currentColor;
}

<a href="#" class="habilidades__titulo">
  title
</a>

score 0 · Answer 3 · answered Sep 26 '22 at 01:43

Set your text-decoration color to 'transparent'. Then on hover you can set the color to whatever you want. Transition should target text-decoration-color.

.habilidades__titulo {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-align: center;
    font-size: 48px;
    color: var(--branco-principal);
    display: inline-block;
    transition: .4s text-decoration-color ease;
}

.habilidades__titulo:hover {
    text-decoration-color: darkorchid;
}

<div class="habilidades__titulo">test</div>

score 0 · Answer 4 · answered Sep 26 '22 at 02:51

This is very hacky. You might want to wrap it inside a div with fixed width.

.habilidades__titulo {
  text-decoration: none;
  text-align: center;
  font-size: 48px;
  color: red;
  display:inline-block;
  width:0px;
  border-bottom: 0.1em solid red;
  transition: all .2s ease;
}

.habilidades__titulo:hover {
  width:90px;
}

<a href="#" class="habilidades__titulo">
  title
</a>

Underline with transition

4 Answers4

Issue

Solution