Replacing <hr> line with with a custom glyph

Question

I would like to replace horizontal line rendered by default by the <hr> tag with three asterisks (horizontally centered). If possible, I want to achieve this with pure CSS, specifically:

• I don't want to touch my markup, there should be just plain <hr>, no helper divs or anything like this (because I'm styling 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 centered, and have no idea how to center it.

Answer 1

Browsers display <hr>s using borders, so:

hr {
    border: none;
}

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