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

Bottom border help

https://w.trhou.se/q21o89jcap.. This is a snapshot of my workspace. I added the bottom border under the list but how do i make the border shorter in length?. As you can see the border takes up the whole page which i don't want

4 Answers

John Maxwell
John Maxwell
9,249 Points

Found this on stack overflow. Haven't ran it, but makes sense.

div { width : 200px; height : 50px;
position: relative; z-index : 1; background: #eee; }

div:before { content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid magenta; }

John Maxwell
John Maxwell
9,249 Points

This uses pseudo elements to format it a little better.

Will this effect my pages' background color? The floats? etc.

Also, That says div. There are a bunch of divs on my page so i don't know if that will effect everything else also. I'm not too knowledgeable in html and css so i could be wrong but from the outside looking in, looking at my code then looking at that it worries me that it can effect everything else. Like i said though i can be wrong im sure you can tell me better.

John Maxwell
John Maxwell
9,249 Points

I'm learning too. Just searched for your issue on Stackoverflow and this type of solution appeared many times. When I get to my computer I'll play around with it

John Maxwell
John Maxwell
9,249 Points

Also, if you drive the div a separate Id you would be able to target it specifically in css.

When i get on my computer later on i'll try out the code you provided. Also, https://w.trhou.se/oj29fstt12 ... This is a snapshot of the example project guil used. I'm trying to create one similar to it, If you notice after each section there's a bottom border to separate the content without taking up the whole width of the page. That's what im trying to achieve.

I tried everything you posted and none of it fixes it