CSS target html entity

Question

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;
}

If you're going to use an :after pseudo-element, put the symbol in the pseudo-element instead of in the markup. — BoltClock
– BoltClock, Commented Sep 13, 2014 at 6:44
@harry if I give padding left and right to the a tag, the first element will have a padding-left and be out of grid. — user2381011
– user2381011, Commented Sep 13, 2014 at 6:47

himanshu · Accepted Answer · 2014-09-13 07:57:23Z

2

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

edited Sep 13, 2014 at 7:57

answered Sep 13, 2014 at 6:39

himanshu

1,7871 gold badge11 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2381011 Over a year ago

Looks like this is the best way to do this. Thanks for the clear solution.

Sajad Karuthedath Over a year ago

@user2381011:try my answer..!!

user663031 Over a year ago

What does "you can give a margin to a tag" mean? The problem is, there is no tag around the •.

himanshu Over a year ago

sorry that a tag is anchor tag

Sajad Karuthedath · Accepted Answer · 2014-09-13 06:49:15Z

2

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;
}

answered Sep 13, 2014 at 6:49

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

1 Comment

user2381011 Over a year ago

I tried your answer as well and it almost fits as a solution. Only the last element don't needs a bullet. I tried this as alternative but it doesn't work a:not(:last-child):after

Collectives™ on Stack Overflow

CSS target html entity

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related