Apply a border-bottom with a css transition on link-hover

Question

I'd like a dotted line to be displayed (with a smooth transition) on link-hover. I tried the below, without success. What is the issue? Many thanks,

See http://jsfiddle.net/94w8xb3a/1/

 article p {
    margin-bottom: 1.1em;
    font-size: 16px;
}

article a:link, article a:visited {
    text-decoration: none;
    color: #9EB63C;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    -webkit-transition:border-bottom .5s;
    -moz-transition:border-bottom .5s;
    -ms-transition:border-bottom .5s;
     -o-transition:border-bottom .5s;
        transition:border-bottom .5s;
}

article a:hover, {
    text-decoration: none;
    color: #9EB63C;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px dotted #10425E;
   -webkit-transition:border-bottom .5s;
    -moz-transition:border-bottom .5s;
    -ms-transition:border-bottom .5s;
     -o-transition:border-bottom .5s;
        transition:border-bottom .5s;

}

Answer 1

Simple syntax problem. Remove comma in this rule:

article a:hover, {
               ^--- remove this comma

Demo: http://jsfiddle.net/94w8xb3a/2/

Answer 2

The browser does not apply the transition for a mere syntax error:

There is a comma in article a:hover, {.

Remove it and the transition will be applied (but the user will not spot the difference).

To solve this mystery you have to know what are the properties that support animations. As a reference, I usually use the Mozilla docs.

You will discover that the border-bottom property is affected for width and color. The width of 1px in your css is too thin as the range will vary from 0 to 1.

The color is a better solution, but you have to specify the initial state in the article a:link, article a:visited rule by adding one of the following properties (or a similar one):

border-bottom: 1px dotted transparent;

or

border-bottom: 1px dotted #FFFFFF;