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

Posted by Stu Cowley
Stu Cowley
26,287 Points

Horizontal Lines Between in <h1>?

Hey guys

So I've always wondered how people put horizontal line before and after a heading 1 element, like this: --------------- Heading ---------------

If someone could point me in the right direction as to how this can be achieved that would be great!

Thanking you in advanced

stu :)

3 Answers

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Stu,

I think what you are looking for is this:

<hr>
<h1>This is the Header</h1>
<hr>
<h3>Now there should be a horizontal line between us :D</h3>

<hr>
or
<hr />

Try this, hope it helps :D

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Don't think this is what he meant

Ralf Koller
Ralf Koller
4,506 Points
Ralf Koller
Ralf Koller
4,506 Points

I guess you think about something like that. Threw together a quick pen...

http://codepen.io/rpkoller/pen/azBih

Stu Cowley
Stu Cowley
26,287 Points

This is exactly what I meant! Thanks for that.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You would do it using pseudo-elements ::before and ::after. See this article by chris coyier at css-tricks

Stu Cowley
Stu Cowley
26,287 Points

This is a great reference. Pretty much bookmarked it as soon as I finished reading the first paragraph.

Thanks mate :)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Anytime. Quick tip for organizing ref articles is a site called pocket, can just send an url to it and then add tags like CSS and EFFECTS to make it easier to find. Has plugins for browsers and iPad app