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

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

How to change the length of the bottom border?

Hi everyone,

How do I change the bottom border length and make it smaller than my current <div> width?

Here is my html in which I would like to add a bottom-border:

 <div class="service">
      <h3>Наши услуги</h3>
        <div class="service-1">
          <ul>
            <li>Перевозки мелких и сборных грузов из ЕС, Азии и США в любой город РФ.</li>
            <li>Контейнерные перевозки</li>
            <li>Перевозка негабаритных грузов</li>
            <li>Погрузка-разгрузка</li>
            <li>Кратковременное и длительное хранение</li>
          </ul>
        </div>

        <div class="service-2">
          <ul>
            <li>Консолидация, упаковка, переупаковка</li>
            <li>Формирование паллет</li>
            <li>Подготовка необходимой сопроводительной документации</li>
            <li>Таможенная очистка грузов в ЕС и РФ</li>
            <li>Железнодорожные перевозки в страны СНГ из Вильнюса и Даугавпилса</li>
          </ul>
        </div>
    </div>

And here is my CSS:

.service {
    display: inline-block;
    width: 80%;
    margin: 0 10% 0 10%;
/*    border-bottom: 2px solid darkgrey;*/
  }

  .service ul {
    padding: 0;
    list-style-type: square;
  }

  .service li {
    font-size: 13px;
    color: grey;
    margin: 2% 0 2% 0%;
  }

  .service-1 {
    border-bottom: 2px solid orange; 
  }

The last line of code i.e. "border-bottom: 2px solid orange; adds a nice border which spans across the length (or rather width) of my <div> paragraph like it is show here: http://d.pr/i/1jT6x .

As far as I understand, I have to use pseudo-class to alter the length of my bottom-border and make it shorter?

Thank you very much in advance.

4 Answers

Jonathan Chua
Jonathan Chua
4,136 Points
Jonathan Chua
Jonathan Chua
4,136 Points

Hi Aleksandrs, The border will always be the same width and height as the element it surrounds. Since you are displaying the bottom border for your .service div, it will always be as wide as the div. The only way to make it shorter is to change the width of the div itself. If you want the orange line in your screenshot to be shorter without affecting the text above it, you can create another div below .service with a height of 0px, set the width to the desired value, and display the bottom border. Hope that makes sense!

Ariel Vainer
Ariel Vainer
7,042 Points
Ariel Vainer
Ariel Vainer
7,042 Points

Add an < hr > tag, then use css to style it.

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

Hey Aleksandrs!

You can change the width if your main container which is ".services" to be around 35% so that the line is as long as the parents width. Like so:

.service {
    display: inline-block;
    width: 35%;
    margin: 0 10% 0 10%;
/*    border-bottom: 2px solid darkgrey;*/
  }

Does this answer your question? Or are you trying to do this without changing your main containers width?

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Thank you everyone for your help.

I will go with Jonathans advice and add an additional <div> below my .services and style it accordingly.