Line Before and After Title Over Image

Line before and after title over image

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)

Title with line before and after over an image

@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>

CSS add line before and after the image

You can do this with Flexbox. You can vertically center img and lines with align-items: center also with flex: 1 :before and :after will take remaining width.

a {  display: flex;  align-items: center;}a:before,a:after {  flex: 1;  content: '';  height: 1px;  background: black;}
<a href="">  <img src="http://placehold.it/100x100"></a>

Use before & after Pseudo-element to make a line

You don't need both :before and :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.

#header {    width: 100%;    height: 50px;    margin: 50px 0;    text-align: center;    font-size: 28px;    position: relative;    background-color: #57585C;}
#header:after { content: ''; width: 100%; border-bottom: solid 1px #fff; position: absolute; left: 0; top: 50%; z-index: 1;}
h3 { background-color: #57585C; /* Same as the parents Background */ width: auto; display: inline-block; z-index: 3; padding: 0 20px 0 20px; color: white; position: relative; font-family: calibri; font-weight: lighter; margin: 0;}
<div id="header">   <h3>Last Projects</h3></div>

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }
<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

How to create both-sided dotted line around a title?

This solution is adapted from this answer : Line separator under text and transparent background

The dotted line will stay verticaly centered according to the height of the text (font-size, multiple lines) and adapt to the width of the text :

dotted line separator

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);body{    background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);    background-repeat:no-repeat;    background-size:100% auto;    font-family: 'Open Sans', sans-serif;}
.divider{ color:#ccc; width:70%; margin:20px auto; overflow:hidden; text-align:center; line-height:1.2em;}
.divider:before, .divider:after{ content:""; vertical-align:middle; display:inline-block; width:50%; border-bottom:2px dotted #ccc; margin:0 2% 0 -55%;}.divider:after{ margin:0 -55% 0 2%;}h1:nth-child(2){ font-size:3em;}span{ display:inline-block; vertical-align:middle; }
<h1 class="divider">Today</h1><h1 class="divider">Today News</h1><h1 class="divider"><span>Today News<br/>More text<span></h1>

Draw line after a title with CSS

Based on this answer :