You seem to have gotten it work, so I may be late to the party here.
The pseudo element before is acting as a normal floated element would. Text 'wraps' around the element; floating doesnt create a column to it's own. If that's what you want there are a few ways to do it ( one of which, btw, does away with the pseudo element itself).
Wrap your dd content ( use a span, or a div if you have block elements) and give the margin-left OR padding-left to make room for your floated icon.
Wrap your dd content ( use a span, or a div if you have block elements) and give the wrap overflow:hidden;
Get rid of the :before pseudo el. , place the icon as a BG graphic on the DD , add padding-left to the DD to accommodate the icon. ( I see that you are trying to use text.. but this is something to consider)
Give the DD padding left approximately equal to the calculated size of the pseudo element. give the pseudo element negative margin-left equal to its own width.
Hope that helps.