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

General Discussion

Trevor Wood
Trevor Wood
17,828 Points
Posted by Trevor Wood
Trevor Wood
17,828 Points

Small borders in between text

How can I add those tiny borders in between text/links. And is it possible to modify the height? An example of what I'm asking about is on this page at the top right, where it says REFERENCES | EXAMPLES | FORUM | ABOUT.

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

All that is, is giving each a element a border-right:1px solid black and horizontal padding to the desired space. You then use nth-child pseudo class to remove the border from the last child.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

That particular site uses puts the pipe character inbetween each anchor tag.

Check this, similar results, done 3 different ways. http://codepen.io/kevink/pen/Kmazg

Trevor Wood
Trevor Wood
17,828 Points
Trevor Wood
Trevor Wood
17,828 Points

Thanks guys, both of y'alls code worked on inserting the lines. But I can't seem to get the last border to disappear. I tried coping and pasting the code and still didn't work. It only deletes all of the borders. Maybe, I'm doing something wrong. Here's my html and css

 <ul class="ftl" id="ftlid">
            <li><a href="#">User Agreement</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Community Guidelines</a></li>
            <li><a href="#">Copyright</a></li>
            <li><a href="#">Send Feedback</a></li>
        </ul><!--end ftl-->

  .ftl { list-style: none; }
 ul.ftl li a { 
     text-decoration: none; 
     float: left; 
     border-right: 1px solid black;  
     padding: 2px 10px;
     margin: 5px 0px;
 }
 #ftlid li:last-of-type {
   border-right: 0;
 }
Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

The reason this is not working is because you put the border-right on the anchor inside the list item, but in the last line, you're trying to remove the border from the list item.

You need to change that to

#ftlid li:last-of-type a {
  border-right:0;
}

Does that make sense?

Trevor Wood
Trevor Wood
17,828 Points
Trevor Wood
Trevor Wood
17,828 Points

Kind of, I half way got what you're saying but I don't fully understand why it works this way. However, it is working flawlessly now.

Thanks for the help Kevin!

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

The easiest way I think I can say it is you have an anchor, inside of a list item, inside of an unordered list. Any one of those three can have a border put on them.

In your code, you put the border on the anchor, but was trying to remove it from the list item. All I did was add the a to drown down one more level to the anchors to remove the border, since that where it was placed in the CSS code above that you wrote.

You'll get there, just keep working on that CSS. It is confusing at first.

Oscar M
Oscar M
2,503 Points
Oscar M
Oscar M
2,503 Points

Another solution is to add a class or id to the list item that you want to remove the right-border from. Check out the HTML & CSS below

        <li class="no_border"><a href="#">Send Feedback</a></li>

CSS: .ftl .no_border a{ border-right: none; }

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

In a simple website, this solution works. but it's not as robust as using a CSS selector like last-child or last-of type, etc. Semantics aside, you know have to remember to move that class if you ever add on to the end of your menu. Using CSS to select the last list item automatically, will help ensure this stay up to date.

If you were using a CMS system like WP, you would likely be generating the menu through a function. That function will have preset classes, and in order to pass in your own classes, you'd have to write a big narly filter in your functions file to take the WP function that generates the menu, and reformat it to add the "no-border" class, and include the logic that the class only gets applied last menu item. Huge task.

Even if you're not to CMS's yet, it would be good practice to learn how to use these types of CSS selectors, since that is exactly what they were included for.