用自定义字形替换<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

在你的psuedo元素上打一个text-align:center。