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

Question

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

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

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

问题是让这个生成的内容水平居中显示。我可以通过调整的“宽度”属性或多或少地使其居中<hr>，但这感觉很笨拙且不灵活。有没有办法告诉浏览器这个内容应该居中？

score 3 · Accepted Answer

这个怎么样，

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

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

score 3 · Accepted Answer

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

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

2 回答 2