CODEWITHSUNDEEP
css
user2381011
user2381011

Reputation: 351

CSS target html entity

I'm building an list in HTML with items that stands next to each other (inline). All items have to be separated with a bullet (&bull) with some padding left and right. My question: how do I target te &bull to add some padding?

<ul>
    <li><a href="#">Disclaimer</a>&bull;</li>
    <li><a href="#">Sitemap</a>&bull;</li>
    <li><a href="#">Other</a></li>
</ul>

The CSS code I tried is:

ul li a:after{
    padding: 0 10px 0 10px;
}

Upvotes: 0

Views: 1175

Answers (2)

himanshu
himanshu

Reputation: 1797

you can give margin to anchor tag

or you can try this

<ul>
    <li><a href="#">Disclaimer</a><span>&bull;</span></li>
    <li><a href="#">Sitemap</a><span>&bull;</span></li>
    <li><a href="#">Other</a></li>
</ul>

and giv padding to span

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

try this

DEMO FIDDLE

MARKUP

<ul>
    <li><a href="#">Disclaimer</a>
    </li>
    <li><a href="#">Sitemap</a>
    </li>
    <li><a href="#">Other</a>
    </li>
</ul>

CSS

ul li {
    display:inline-block;
}
ul li a:after {
    content:"\2022";
    padding: 0 10px 0 10px;
}

Upvotes: 2

Related Questions