:after in css

rctneil

rctneil

rctneil

Associate
Joined
31 Jan 2007
Posts
1,860
Hey,

I have a simple list like so:

<ul id="nav">
<li>stuff 1</li>
<li>stuff 2</li>
<li>stuff 3</li>
<li>stuff 4</li>
</ul>

I am adding the following css to it:


#nav li:after
{
content: " | ";
}

For some reason, the spaces either side of the pipe do not show. Is there a way of getting spaces in there so I end up with space, pipe, space?

I tried using "<br />|<br />" but it literally puts that in between my list items?

Any ideas?

Thanks

Neil
 
I just tried and it works fine for me, I even tried copying and pasting your code and it still works.

I'm tired so this might not be the best solution but you can use this for the time being, give it a padding-left and whatever px you want and it'll sit further away from the text, if thats what you're after.

Code: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#nav li:after{content:"|";padding-left:20px;}
</style>
</head>
<body>
<ul id="nav">
<li>hum</li>
<li>sum</li>
</ul>
</body>
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom