html - 通过 css 在我的文本旁边放一行

Question

我想在我的文字旁边放一条线 Like THIS

- - - 你好世界 - - -

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

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>

它是这样出来的：图像样本

更新

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

<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

Answer 2

不需要css

─── Hello World ───

看起来像这样────你好世界────

Answer 3

试试这个。但不兼容所有浏览器版本。

 p:before,p:after  {
  content: "---";
 }

<p>Hello WOrld</p>

Answer 4

我使用div's 实现了这一点。检查此链接以查看结果。

HTML

<div class="line"></div>
<div class="text">Hello WOrld</div>
<div class="line"></div>

CSS

.line
{
  width:100px;background-color:black;
  border: 0.1em solid black; /* dashed, groove, inset */
  margin-top:0.45em;margin-bottom:0.45em;
}

.line, .text
{
  float:left;
}

.text
{
  padding-left:10px;padding-right:10px;
}

请记住，当您添加 和 的比例（高度）时，margin-top它应该等于 1。就像我的例子一样。这将保持布局干净。margin-bottomborder0.45 + 0.45 + 0.1 = 1

如果你想让线条更粗，那么只需增加border记住margin-top和的比例即可margin-bottom。

Answer 5

你好世界

p {
    text-align:center;
    border-left: 50px solid #363454;
    border-right: 50px solid #363454;
    width:150px;
    line-height: 2px;
}
 

<p>Hello World</p>