:before doesn't inherit parent's width

:before doesn't inherit parent's width

I'm trying to create a text that morphs into bolder text on mouse over.
To achieve this I created invisible bold text (to give correct width to
the container which would avoid jumping when the text changes its weight
on mouse over) and I'm animating only :before pseudo element from
font-weight: 200; to font-weight: 700;.
Demo: http://jsfiddle.net/ky55D/
Demo with text enabled: http://jsfiddle.net/ky55D/1/ (they don't match for
some reason with or without :hover).
The problem is that the second word "Gravida" in my example goes to the
next line instead of being placed on top of its parent. Adding higher
width to .link:before helps but I have no idea what the proper width would
be. 200% works for 2 words. 300% works for 3 words etc.

Any ideas if this can be fixed with just CSS?