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

Question

我想将<hr>标签默认呈现的水平线替换为三个星号(水平居中).如果可能的话,我想用纯CSS实现这一点,具体来说:

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

首先我试过:

hr {
    width: 0;
}

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

它几乎可以解决问题,但我希望它集中在一起,并且不知道如何将它居中.

Answer 1

浏览器<hr>使用边框显示s,因此:

hr {
    border: none;
}

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