是否可以水平居中生成的内容？

Question

我想使用CSS来改变页面上<hr>元素的外观：而不是水平线，我希望每个元素都显示为一组三个星号。我可以用这样的东西来实现这个目标：

hr {
    border: none;
    margin: 3.0rem auto;
    width: 5rem;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

（Fiddle here。）

问题是让这些生成的内容以水平居中的方式显示。通过调整<hr>的“宽度”属性，我可以或多或少地集中注意力，但这会让人感到烦恼和不灵活。有没有办法告诉浏览器这个内容应该居中？

Answer 1

这个怎么样，

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

http://jsfiddle.net/rMNSJ/2/

Answer 2

删除width属性并将text-align:center;添加到hr规则：

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

<强> jsFiddle example