Question

如何在文本的两侧添加线条，创建类似文本分隔符的内容，但不添加文本背景。

<h5>Some text goes here</h5>

在这篇文章CSS challenge, can I do this without introducing more HTML?中，所有解决方案都带有文字背景。

在我的情况下，文字在图片上，因此文字背景很糟糕。

Answer 1

这些日子使用以下内容可能无法做到最低限度：之前和之后：选择者之后？

h5:before, h5:after{
    content: '';
    width: 2em;
    height: 2px;
    padding: 0;
    margin-right: 5px;
    background-color: #000000;
    display: inline-block;
    position: relative;
    bottom: 3px;
}

h5:after{
    margin-left: 5px;
    margin-right:  0;
}

这是一个小提琴：http://jsfiddle.net/3616he4y/2/

Answer 2

您最好的解决方案可能是添加另一个元素。没有它，你不能这样做。你可以尝试：

<h3><span>TEXT</span></h3>

h3 {
    background-image: url(single-pixel-img.gif) 50% 50% repeat-x;
    text-align: center;
    padding: 0 20px;
}
h3 span {
    background: #fff;
    display: inline-block;
}

然后你仍然可以在跨度等处添加一些填充...单行图像可以是1x1黑色gif，它几乎不会为你的页面加载添加任何内容。它简单，优雅，只增加了几行代码。

Answer 3

对我来说，这里的伪元素再次非常有用，并且正如csstricks的链接所解释的那样，设置并不是什么大问题。

我宁愿使用static位置，因为一旦文字分成几行，它就会有一些优势。 Examples behavior/DEMO：

HTML

<h1>text & strikes</h1>
<h1>text <br/>& </br/>strikes</h1>
<h1><span>text <br/>& </br/>strikes</span></h1><!-- see demo to find out <span> purpose */

CSS

h1 {
  text-align:center;
  overflow:hidden;/* hide parts of pseudo jumping off the box */
  text-shadow:0 0 1px white;/* increase visibility of text if bg is dark too */
  background:url(http://lorempixel.com/100/600/abstract);
}
h1:before,
h1:after {
  content:'';
  display:inline-block;
  height:0.06em;
  width:100%;/* could be a little less*/
  box-shadow:/* looks like text */
    inset 0 0 0 20px, 
    0 0 1px white
    ;
  vertical-align:middle;
}
h1:before {
  margin-left:-100%;/* width is virtually reduce to zero from the left side to stick to text coming next */
  margin-right:0.5em;
}
h1:after {
  margin-right:-100%;/* width is virtually reduce to zero from the right side to stick to text */
  margin-left:0.5em;
}
span {
  display:inline-block;/* holds any line breaks */
  vertical-align:middle;
}

Answer 4

尝试<hr/>

<强> FIDDLE DEMO

hr {
    width:100px;
    border:2px solid;
}
h5{
    text-align:center;
}

Answer 5

您可以使用边框：

h5 {
   border-right: 1px solid #dadada;
   border-left: 1px solid #dadada;
}

如果要在线条和文本之间留出空格，可以在样式中左右添加填充：

h5 {
   border-right: 1px solid #dadada;
   border-left: 1px solid #dadada;
   padding: 0 5px;
}

如果您想将h5用作导航项并且想要将其与其他项目分开（您需要分隔符的原因），则可以仅将边框放在右侧，并且每个下一个项目都将继承设置。

对于最后一项，显然你想要删除边框，因为它后面没有任何东西，所以你可以这样做：

h5 {
   border-right: 1px solid #dadada;
}
h5:last-child {
   border-right: none;
}

在某些文字的两侧添加线条

5 个答案: