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

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
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Stu,

I think what you are looking for is this:

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

<hr />

Try this, hope it helps :D

Don't think this is what he meant

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


This is exactly what I meant! Thanks for that.

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

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

Thanks mate :)

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