CSS3 animation doesn't work if div:before is floating (WebKit)

I want my text to blink using CSS3 only. It works fine. However, if I add float:left to the div's :before selector, it stops the animation from working on WebKit (Safari/Chrome).

For demonstration, open JSFiddle on WebKit, remove the float:left to see it working.

CSS:

.blink_me:before {
  content: "Blink";
}

.blink_me {
  -webkit-animation: blinker 1.5s linear infinite;
  -moz-animation: blinker 1.5s linear infinite;
  -o-animation: blinker 1.5s linear infinite;
  animation: blinker 1.5s linear infinite; 
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}

HTML:

<span class="blink_me"> </span>

How can I make it work with the float on the selector?

BOUNTY info: just rewarding an existing answer which certainly deserves more upvotes.