CSS transition does not work with underline

Question

I use css so that the underscore falls within the range:

CSS

.un{
    text-decoration:none;
    transition: all .5s ease-in;
}
.un:hover{
    text-decoration:underline;
}  

HTML:

<span class="un"> Underlined Text - Or to be underlined </span>

The underlined text simply appears; it does not move for more than 0.5 seconds, such as transition. Why not? How can I do this job?

Answer 1

You cannot go text-decoration. In modern browsers, you can do the same with CSS:

.un{
  display:inline-block;
}
.un:after{
content:'';
width:0px;
  height:1px;
display:block;
background:black;
transition: all .5s ease-in;
}
.un:hover:after{
    width:100%;
}

<span class="un"> Underlined Text - Or to be underlined </span>

Run codeHide result

This is an easy way to do this, you can get all kinds of transitions (try playing with margins / alignment. You can do some awesome effects without adding to your HTML)
 But if you just want a simple underline, use a border:

.un{
      display:inline-block;
      transition: all .5s ease-in;
      border-bottom:1px solid transparent;
    }
    .un:hover{
        border-bottom:1px solid black;
    }

<span class="un"> Underlined Text - Or to be underlined </span>

Run codeHide result

Answer 2

border-bottom, :

.un{
    border-bottom: 1px solid transparent;    
    transition: all .5s ease-in;
}
.un:hover{
    border-bottom: 1px solid black;    
}

<span class="un"> Underlined Text - Or to be underlined </span>

Hide result

Answer 3

Since it text-decorationis an all or nothing property, you probably want to try it instead border-bottom. So I did this earlier:

.un {
    border-bottom: 1px solid transparent;
    transition: border-color 0.5s ease-in;
}
.un:hover {
    border-color: black; /* use whatever color matches your text */
}

Text that is <span class="un">wrapped in the "un" class</span> has a border-bottom that appears as an underline that fades in.

Run codeHide result

Applying the transition to changing the border color from transparent to the color of your text should cause fading without underlining for underlining.