在图像之前和之后的标题 [英] Line before and after title over image

问题描述

我想在中心标题之前和之后创建行。线条和文字必须有透明背景，才能将它们放在不均匀的背景上。该行不能为100％宽度，如下所示：

标题的文本可以更改：

• 标题宽度未知


• 标题可以跨越几行

  h1 {text-align：center; border-bottom：1px solid＃000;}  

  h1>今天< / h1>  

解决方案>

您可以使用两个伪元素和边框在标题两侧生成行：

• 这可以在透明背景（线条和标题有透明背景）上工作。


• 行长将适应标题宽度，因此无论标题长度如何，它们都始终在相同位置开始和结束。


• strong>跨多行，而左右两行保持垂直居中（注意，您需要在< span> ）

  @import url（http://fonts.googleapis.com/css?family=Open+Sans:300）; body {background-image：url（http://i.imgur.com/EzOh4DX.jpg）;背景重复：无重复; background-size：100％auto; font-family：'Open Sans'，sans-serif;} h1 {width：70％; margin：.7em auto; overflow：hidden; text-align：center; font-weight：300; color：#fff;} h1：before，h1：after {content：; display：inline-block; width：50％;保证金：0 .5em 0 -55％; vertical-align：middle; border-bottom：1px solid;} h1：after {margin：0 -55％0 .5em;} span {display：inline-block; vertical-align：middle;}  

 < h1> Today& ; / h1>< h1>今天新闻< / h1>< h1>< span> Today< br /> news< / span>< / h1>  

I want to create a line before and after a centered title. The line and text must have a transparent background to be able to position them on a uneven background. The line must not be 100% width, like this:

The text of the title can change:

• Width of title isn't known
• The title can span on several lines

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}

<h1>Today</h1>

解决方案

You can make a line on both sides of the title with 2 pseudo elements and borders:

• This works over a transparent background (lines and title have transparent backgrounds).
• The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
• The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a <span> tag for this to work. See demo)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}

<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

这篇关于在图像之前和之后的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！