Question

Here is my code:

<style>
#links-div a {
    display: inline-block;
}

#links-div a:not(:first-child):before {
    content: " - ";
}
</style>

<div id = "links-div">
    <a href = "#">Link 1</a>
    <a href = "#">Link 2</a>
    <a href = "#">Link 3</a>
    <a href = "#">Link 4</a>
</div>

The dash/hyphen is added before all of the links (except the first) but it is added within the link.

Is it possible to take it out of the anchor? Shouldn’t it really be adding content before the anchor tag?

Is my only solution putting each link in a list? Since it is a list, I don’t mind, but it would just save a little time.

Cheers,

Nick

Answer 1

You can add your links in ul list

HTML

<div id = "links-div">
    <ul>
        <li><a href = "#">Link 1</a></li>
        <li><a href = "#">Link 2</a></li>
        <li><a href = "#">Link 3</a></li>
        <li><a href = "#">Link 4</a></li>
    </ul>
</div>​

CSS

#links-div ul li {
    display: inline-block;
}    
#links-div ul li:not(:first-child):before {
    content: " - ";
}
​

Demo http://jsfiddle.net/mKQas/1/