Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by John Levy
John Levy
1,451 Points

How to add a divider between two words

How to add a divider between two words in the footer bar? Thanks in advance

10 Answers

Tomasz Chiossi
Tomasz Chiossi
7,545 Points

John you need to be more careful about your code. You've got error in you html structure (check divider). Btw. this divider is not longer necessary there. Code below. Has to work, I've checked this.

.footer li {display: inline-block;}

.footer li:not(:first-child):after {
  content: '|';
  padding-left: 10px;
  padding-right: 10px;
}

<ul class="footer">
   <li>© 2016 Tunnel Vision Fitness</li>
   <li>Making Mirrors Look Better</li>
   </ul>
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

lol i have sleeped the whole conversation lol but thats nice code

Tomasz Chiossi
Tomasz Chiossi
7,545 Points
Tomasz Chiossi
Tomasz Chiossi
7,545 Points

Hi John.

I'm assuming you've got a <ul> there. So if I'm right is simple way to handle divider wherever you want.

ul li:not(:last-child) a:after { content: '|'; padding: 0 10px; }

Generally you can grab <li> or <a> element and pass there content after of before as you like. That can by pipe but also any character or sign.

In case you don't have <ul> there but some divs or <p> you can do similar work or add some extra <span> element to help you handle this.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

You can alwasy try border-right or left to have 1px solid red, and then the last-child to have border-right left none;

Tomasz Chiossi
Tomasz Chiossi
7,545 Points

Yeah that is right as well. But one thing is when you have got border that also count height of these element and sometimes goes with way to high divider compare to size of text. (usually there is always some padding around list items).

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, yeah, there are many ways you can do it, and depends what he is looking for. It was just an example for him to experiment a bit. This might not be the best, but it's good if he tries it out.

Tomasz Chiossi
Tomasz Chiossi
7,545 Points

Yeah I'm absolutely with you Aurelian. I've just mentioned about it because he could be surprised about it when he will go your way.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your replys The HTML code I used for this is shown below. I am looking to place the divider where the dash is (between the fitness and the Making). Can someone give me an example for doing. I am still a little confused. <div class="footer">© 2016 Tunnel Vision Fitness- Making Mirrors Look Better.</div>

Thanks

Tomasz Chiossi
Tomasz Chiossi
7,545 Points
Tomasz Chiossi
Tomasz Chiossi
7,545 Points

Hi John

As you don't have any list items at that footer is not easy just put there "|" where the dash is?

If you want do this in CSS you can easily just add empty <span class="divider"></span> container where you have got this dash and then style it.

.divider { content: "|"; display: inline-block; margin-left: 10px; margin-right; 10px; }

Something like this.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response. I have attached my CSS and HTML code below. I tried making the changes you suggested but I am still having no luck. Where am I going wrong? http://codepen.io/Johned22/pen/vKzAyd

Tomasz Chiossi
Tomasz Chiossi
7,545 Points
Tomasz Chiossi
Tomasz Chiossi
7,545 Points

Hi John

Ok I see you have got a unsorted list items there. So we can do this first way.

Make <li> inline:

.footer li { display: inline-blocks; }

Then we adding pipe between <li> and keep on mind that not going to be attached to the last element:

.footer li:not(:last-child):after { content: "|"; padding-left: 10px; padding-right: 10px; }

And you can remove span with divider class.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Hello It is still now working this is the code I have used HTML- <ul class="footer"> <li>© 2016 Tunnel Vision Fitness</li> class="divider"> <li>Making Mirrors Look Better</li> </ul>

CSS .footer { position: fixed; right: 0; bottom: 0; left: 0; padding: 8px; background-color: #efefef; text-align: left; width: 100%; }

.footer li { display: inline-blocks; }

.footer li:not(:last-child):after { content: "|"; padding-left: 10px; padding-right: 10px; }

Where did I go wrong? Thanks

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for the help. How do I move the divider? I am trying to place it between the Fitness and Making. Thanks in advance

Tomasz Chiossi
Tomasz Chiossi
7,545 Points

John divider has been placed already between these two <li>. Check this code then you will see.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks, I just checked it and it worked. Thanks again