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 Kevin Alvarez
Kevin Alvarez
4,851 Points

How to adjust the length of your underline?

I want to add an underline under my h1 heading and make it just a little longer then the heading itself.

This is the html for the h1 heading.

        <header class="main-header">

    <a href="index.html" id="logo">
        <h1>Kevin Alvarez</h1>
        <h2>Aspiring Web Developer</h2>
    </a>

This is the css i have so far. 

            h1 {
           font-size:3.5em;
           border-bottom:2px solid white;
               }

But this creates a bottom border that spans the whole length of its parent element. I just want it to be a little longer the the h1 heading.

2 Answers

Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

You can reduce the length of the border to the size of the h1 element by setting it's display property to inline-block. Then use padding-left and padding-right to make it longer.

I made a jsfiddle to demonstrate.

Kevin Alvarez
Kevin Alvarez
4,851 Points
Kevin Alvarez
Kevin Alvarez
4,851 Points

Yup, that worked. Thank you