-1

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

- - - 你好世界 - - -

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

4

5 回答 5

7

您是否尝试过 :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

于 2012-09-23T06:28:57.693 回答
2

不需要css

&boxh;&boxh;&boxh;&nbsp;Hello World&nbsp;&boxh;&boxh;&boxh;

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

于 2015-10-06T02:51:04.893 回答
1

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

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

<p>Hello WOrld</p>
于 2012-09-23T06:32:18.920 回答
0

我使用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

于 2012-09-23T06:58:42.723 回答
0

你好世界

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

于 2019-11-11T16:20:38.413 回答