用css在我的文字旁边划一条线

Question

我想在我的文字旁边放一条线就像这样

- - - 你好,世界 - - -

该线应该继续并且BOLD并且对齐中间和RED

Answer 1

你有没有尝试过:在选择器之前和之后？

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

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

这是它的出现方式:图像样本

UPDATE

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

<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