Replacing the <hr> String with a Special Glyph

Question

I would like to replace the horizontal line displayed by default with the <hr> tag with three asterisks (with horizontal orientation). If possible, I want to achieve this with pure CSS , in particular:

• I don’t want to touch my markup, it should just be <hr> , no auxiliary divs or anything like that (because I style Markdown files);
• no background images;
• no javascript.

First I tried:

 hr { width: 0; } hr:before { content: "***"; } 

and it almost does the trick, but I want it to be focused, and I don’t know how to center it.

Answer 1

Browsers display <hr> using borders, so:

 hr { border: none; } hr::before { content: '***'; display: block; text-align: center; } 

Answer 2

Put a text-align:center on your psuedo element.