Display one element per line with css and outer text

Question

I have following html fragment:

<div>
    <a class="item" href="http://google.com">Google</a>,
    <a class="item" href="http://yahoo.com">Yahoo</a>,
    <a class="item" href="http://yandex.com">Yandex</a>
</div>

Right now it is displayed like this:

Google, Yahoo, Yandex

And I need it to be displayed like this:

Google,
Yahoo,
Yandex

Can it be done ONLY by modifying CSS properties of .item class? (without inserting new tags (e.g. BR) and without touching comma sign)?

I've tried with

.item {
    clear: both;
    float: left;    
}

But then all commas stay on the first line.

Answer 1

Maybe this can work,

add an empty string instead of adding a new comma in css and deleting or changing color of the old one

a:before {
    content:'';
    display: block; 
}

jsFiddle DEMO