用自定义字形替换 <hr> 行

Question

我想用三个星号（水平居中）替换 <hr> 标签默认呈现的水平线。如果可能的话，我想用纯粹的CSS实现这个，具体来说：

• 我不想修改我的标记，应该只有普通的 <hr>，没有辅助 div 或类似的东西（因为我正在设计 Markdown 文件的样式）；
• 没有背景图片；
• 没有Javascript.

首先我尝试了：

hr {
    width: 0;
}

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

它几乎 可以解决问题，但我希望它居中，但不知道如何居中。

Answer 1

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

Answer 2

浏览器使用边框显示 <hr>s，因此：

hr {
    border: none;
}

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