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 trialNas Jones
7,849 PointsBottom 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
9,249 PointsFound 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
9,249 PointsI'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
9,249 PointsAlso, if you drive the div a separate Id you would be able to target it specifically in css.
Nas Jones
7,849 PointsWhen 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.
Nas Jones
7,849 PointsI tried everything you posted and none of it fixes it
John Maxwell
9,249 PointsJohn Maxwell
9,249 PointsThis uses pseudo elements to format it a little better.
Nas Jones
7,849 PointsNas Jones
7,849 PointsWill this effect my pages' background color? The floats? etc.
Nas Jones
7,849 PointsNas Jones
7,849 PointsAlso, 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.