图片标题前后的线 [英] Line before and after title over image

问题描述

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屋！