Html – CSS transition not working with underline

csshtml

I am using css to make an underline come under a span:

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 underline simply appears, it doesn't move in over .5 seconds, like the transition should apply. Why not? How can I make this work?

Best Solution

Updated for 2021:

The support for text-decoration-color has come a long way, and common browser support requirements have loosened making it a viable option for most new projects. If you are only seeking a color transition, and can do without IE support, see this answer below.


Original answer:

You cannot change the color of the text-decoration independent of the color. However, you can achieve a similar effect with pseudo elements:

.un {
  display: inline-block;
}

.un::after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover::after {
  width: 100%;
}
<span class="un">Underlined Text - Or to be underlined</span>

That is the most customizable way to do it, you can get all sorts of transitions. (Try playing around with the margins/alignment. You can make some awesome effects without adding to your HTML)
But if you just want a simple underline, use a border:

.un {
  transition: 300ms;
  border-bottom: 1px solid transparent;
}

.un:hover {
  border-color: black;
}
<span class="un"> Underlined Text - Or to be underlined </span>