html - CSS-Transition doesn't work on pseudo-element -

the idea kind of underscore appears when hyperlink appears. underscore shall grow it's full size.

that's got far:

.wrap {    margin: 10px auto;    width: 600px;  }    #test {    text-decoration: none;  }    #test:after {    width: 0;    transition: 3s;  }    #test:hover:after {    content: '';    display: block;    width: 100%;    border: 3px solid teal;  }

<div class="wrap">    <a id="test" href="#">some dummy-text testing ...</a>  </div>

the underscore appears , disappears expected. but without transition.

i have seen other websites uses such effects on these browser (ie 11) here. should work.

what i'm doing wrong?

specifying transition on element-without-hover how shall done. far know ...

it's because aren't adding content until :hover state.

you should define as possible in initial state , change required properties :hover state.

try

#test:after {   content: "";   display: block;   width: 0;   transition: 3s; } 

.wrap {    margin: 10px auto;    width: 600px;  }  #test {    text-decoration: none;  }  #test:after {    content: "";    display: block;    width: 0;    transition: 3s;    border: 3px solid transparent;  }  #test:hover:after {    width: 100%;    border: 3px solid teal;  }

<div class="wrap">    <a id="test" href="#">some dummy-text testing ...</a>  </div>