Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text Separators for LI Elements

Tags:

css

html-lists

I'd like to add a forward slashes ('/') between my li elements, but I'm not sure of the best way to do that semantically. Right now, I'm simply including the forward slash in the li tag and adding spacing with non-breaking spaces, like so:

<ul id="footer_menu">     <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>     <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>     <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>     <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>     <li>Contact</li> </ul> 

What do you think? Thanks.

like image 731
Frank Avatar asked Jun 08 '11 21:06

Frank


People also ask

How do you put spaces between Li?

To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.

Can you have multiple Li?

Yes it is possible. I created an example pen for you. Place your image files instead of the span tags.


2 Answers

You can use pseudo-elements to include text after an element and you can use CSS3 selectors to remove the trailing slash from the last element.

#footer_menu li:after {     content: "/"; } #footer_menu li:last-child:after {     content: ""; } 

EDIT:

The whole thing can be done in one line with better CSS3.

#footer_menu li:nth-child(n+2):before {     content: "/"; } 

EDIT: EDIT:

It's even easier than that.

#footer_menu li + li:before {     content: "/"; } 
like image 183
Kyle Sletten Avatar answered Oct 15 '22 21:10

Kyle Sletten


This is my solution for LI element separated by | (pipe) :

li + li:before {     content: " | "; } 

The adjacency combinator (a plus sign, +) comes in very handy in this case. It allows you to style an element if it has been directly preceded by another specified element. Since the first li is not preceded by another li, it won't have the content prepended to it. This is much less typing than:

li:before {   content: " | "; }  li:first-child:before {   content: ""; } 
like image 44
klassmann Avatar answered Oct 15 '22 21:10

klassmann