用自定义标志符号替换<hr />行

Question

我想将<hr>标签默认呈现的水平线替换为三个星号（水平居中）。如果可能的话，我想用纯CSS实现 ，特别是：

• 我不想触摸我的标记，应该只是简单的<hr>，没有帮助div或类似的东西（因为我是造型Markdown文件）;
• 没有背景图片;
• 没有Javascript。

首先我尝试了：

hr {
    width: 0;
}

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

并且几乎可以解决这个问题，但我希望它集中在一起，并且不知道如何将其集中。

Answer 1

浏览器使用边框显示<hr>，所以：

hr {
    border: none;
}

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

Answer 2

在你的伪元素上拍一个text-align:center。