0

I want to achieve this particular display by CSS:

enter image description here

I need to put there various texts and the lines to fill the white space that is left on right and left.

So far I got to this http://jsfiddle.net/g5jtm/, however there are several issues that I encounter:

  1. the width of the text is variable and if I get out the width:40%; it will reset the width of the other 2 lines
  2. The display:table does not allow me to align the lines through the middle of the text

HTML:

<div class="container">
    <div class="lines l1"></div>
    <div class="copy">Consumer review</div>
    <div class="lines l2"></div>    
</div>

CSS: 

.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy  {display:table-cell;vertical-align: middle;width:auto; }
.copy {  white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
Mike
  • 3,017
  • 1
  • 34
  • 47
  • I know this is not the question. But have you tried to use `
    My Teyt
    ` for this effect?     – Nico O Feb 18 '14 at 16:20
  • Do you want the line to go behind the text? – Paulie_D Feb 18 '14 at 16:23
  • @Paulie_D no ... that is the idea :) – Mike Feb 18 '14 at 16:25
  • @NicoO apparently I cannot achieve what I want using fieldset. Here is some explanation http://stackoverflow.com/questions/2213881/is-it-possible-to-achieve-a-fieldset-like-effect-without-using-the-fieldset – Mike Feb 18 '14 at 16:27

2 Answers2

4

Here's one way with pseudo-elements

Codepen Demo

HTML

<div class="wrapper">
  <h1 class="line">Consumer Review</h1>
</div>

CSS

.wrapper {
  width:50%;
  margin:0 auto;
}

.line {
  display: table;
  white-space: nowrap;
}

.line:before,
.line:after {
  background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
  content: '';
  display: table-cell;
  width: 50%;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

How about a horizontal line tag

html:

<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>    
</div>

css:

.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy  {display:table-cell;vertical-align: middle;width:auto; }
.copy {  white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}
EagerMike
  • 2,032
  • 1
  • 24
  • 40