css - Styling pseudo-elements when a link has wrapped? -

i've created 'underline' animation uses ::after pseudo-element underneath link. here code link , pseudo-element:

link

a {     position: relative; } 

::after

a:after {     content: '';     display: inline;     position: absolute;     height: 2px;     width: 0%;     background-color: #ce3f4f;     left: 0%;     bottom: 0px;     transition: 0.2s ease; }  a:hover::after {     width: 100%; } 

this works fine when link on single line, if link flows onto next line fills across bottom of first line, seen here:

http://i.stack.imgur.com/7sx7o.jpg

if inspect element appears issue not solvable, browser (in case, firefox) isn't selecting entirety of wrapped element:

http://i.stack.imgur.com/342gh.jpg

is there way of solving purely css, or problem way browser renders objects? have played around lot of white-space, display , position configurations no avail.

here's example of behaviour:

https://jsfiddle.net/57lmkyf4/

this cannot done css. (i've implemented using js links wrap on not more 2 lines: https://jsfiddle.net/6zm8l9jq/1/ - can resize frame see @ work)

in chrome (39.0.2171.95) underline under wrapping a doesn't work @ all, while in ff displays in screenshot above. because a element inline (default), , when wraps, pseudo/child elements depend on width 0 width in chrome , element's width on first row in ff. inline elements don't have control on own width/height properties (eg, can't set width:100px on them without changing them block elements), , affects absolutely positioned elements depend on them width/height.

if call window.getcomputedstyle method on pseudo element in ff , chrome, like:

var = document.queryselector('a'); a.onmouseover = function(){      settimeout(function(){         var width = window.getcomputedstyle(a,':after').getpropertyvalue('width');         console.log(width);          },300); //timeout animation 100% width completed }  

...in chrome see 0px while in ff see 100% - , neither span actual 100% of parent. if added child element (eg span) a instead of pseudo element, investigate child's actual width after mouseover calling getboundingclientrect().width on child, in case again, in chrome see 0px, , in ff width of part of parent element falling on first line.

you can change a element display: inline-block , work, no longer wrap.