Drew's Blog - Home - Archive

HTML/CSS: horizontal section dividers with ::after

February 01 2012

This morning, I was working on my resume (which I keep in HTML), and I was hoping to have some horizontal dividers between sections like this:


And I had forgotten that <hr> existed. What I ended up doing was using the ::after psudo-element, which I think is a much cooler solution anyway. ;)

Unfortunately, I don't have a good solution for making the bar exactly fill up the width between the end of the text and the end of the page. What I ended up doing was this:

<style> h2.work { display:block; white-space:nowrap; overflow:hidden; } h2.work::after { content:""; width:1000px; border-bottom:1px solid black; margin:5px 10px; display:inline-block; } </style> <h2 class="work">Section</h2>

But maybe someone else can come up with a better solution than using white-space:nowrap; and overflow:hidden;? If you do, tweet me and I'll put your solution up here.

Also, note that you may need to adjust the margin so that the border looks nice with your text. margin:5px 10px; just happened to look good for me. (Also also, ::after has display:inline; by default, so you at least need to make it display:inline-block; or it won't let you set a width.)

If you've read this far, you should probably follow me on Twitter.

See more posts

Drew writes code for fun and (sometimes) profit. He's currently studying Computer Science at Carnegie Mellon University. He has previously worked at Facebook, Amazon, and a startup called Intersect.