melky,
вот был вариант )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a{
font-size: 24px;
text-decoration: none;
margin: auto 50%;
width: 250px;
}
a:hover ~ hr{
height: 2px;
background: #0000FF;
height: 1px;
width: 250px;
}
hr{
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
height: 0px;
width: 0px;
background: #0000FF;
margin: auto 50%;
margin-top: -5px;
}
</style>
</head>
<body>
<a href="http://javascript.ru/forum/">http://javascript.ru/forum/</a>
<hr >
</body>
</html>