html - 通过 css 在我的文字旁边加一行

Question

我想像这样在我的文字旁边加一行

----- Hello World -----

这条线应该继续加粗，中间对齐，红色

Answer 1

你试过 :before 和 :after 选择器了吗？

<span class="dashes">Hello WOrld</span>

<style type="text/css">
 .dashes { font-weight: bold; }
 .dashes:before, .dashes:after { content:"----"; color:#f00; }
</style>

结果是这样的:image sample

更新

根据您的更新和评论，我认为这符合您的描述:

<h4 class="sidelines"><span>Hello WOrld</span></h4>
<style type="text/css">
h4.sidelines { text-align: center; border-bottom: 1px solid #f00; height: 0.5em; }
h4.sidelines span { display: inline-block; background: #fff; padding:0 0.25em; }
</style>

这将为您提供一个居中的粗体标题，每边都有连续的线条。

这是一个更新示例:http://o7.no/PVXvaH