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 Evan Pizzolato
Evan Pizzolato
2,797 Points

im looking to create a Horizontal Rules <hr> using the characters ////////. how is this possible?

can i make this happen in stylesheet or should i just create it using individual lines of text?

3 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

Hi Evan, you can't use the slash characters themselves but you can mimic them by putting a custom background on your hr tags. First of all you have to remove the standard border line and give the hr tag a height.

hr {
  border: none;
  height: 15px;
}

To mimic the slashes you can put this rule on the hr tag:

background: repeating-linear-gradient(-60deg, #fff, #fff 5px, #000 0, #000 7px);

So your css will look like:

hr {
  border: none;
  height: 15px;
  background: repeating-linear-gradient(-60deg, #fff, #fff 5px, #000 0, #000 7px);
}

You can play around with the values, height, colors etc.

Browsers < IE10 don't support this, so you have to look for a fallback there.

Evan Pizzolato
Evan Pizzolato
2,797 Points

this is perfect! thanks so much

Tim Knight
Tim Knight
28,888 Points

I wish I could upvote this twice. Nicely done.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Here is a link that might help to create some stylised hr with css. link.

I don't personally see a way to achieve it without an image in your case.

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

I don't know if you can do it with straight CSS, but you should be able to do it with a small image that you repeat horizontally as a background image.