Two horizontal lines across a box

Question

I am trying to draw two horizontal lines across a box: http://codepen.io/anon/pen/gpZqOQ

I used a plugin to generate some code based on a design. However the end result is not optimized.

<h1 id="H1_1">
    <span id="SPAN_2">Feedback</span>
</h1>

#H1_1 {
    box-sizing: border-box;
    clear: both;
    color: rgb(64, 64, 64);
    height: 45px;
    position: relative;
    text-align: center;
    width: 1140px;
    perspective-origin: 570px 22.5px;
    transform-origin: 570px 22.5px;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    margin: 0px 0px 70px;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/

#H1_1:after {
    box-sizing: border-box;
    color: rgb(64, 64, 64);
    display: block;
    height: 1px;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 22.5px;
    width: 1140px;
    align-self: stretch;
    perspective-origin: 570px 0.5px;
    transform-origin: 570px 0.5px;
    content: '"' '"';
    background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/

#SPAN_2 {
    box-sizing: border-box;
    color: rgb(189, 195, 199);
    display: inline-block;
    height: 45px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 108.890625px;
    z-index: 10;
    perspective-origin: 54.4375px 22.5px;
    transform-origin: 54.4375px 22.5px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 3px solid rgb(189, 195, 199);
    font: normal normal bold normal 15px/normal Montserrat, sans-serif;
    outline: rgb(189, 195, 199) none 0px;
    padding: 10px 20px;
    transition: all 0.2s ease 0s;
}/*#SPAN_2*/

Is there any other simpler way to achieve this via CSS?

score 1 · Answer 1 · answered Aug 03 '15 at 18:50

1

<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>

Apply following CSS

hr{
  display: inline-block;
  margin: 25px 0;
  position: absolute;
}
#SPAN_2 {
  position: absolute;
  z-index: 2;
  display: inline-block;
  border: 3px solid rgb(189, 195, 199);
  outline: rgb(189, 195, 199) none 0px;
  padding: 10px 20px;
  margin: 0 0 0 50%;
}

answered Aug 03 '15 at 18:50

Shreeram K

1,719
13
22

Very interesting piece of code. Thanks and upvoted. – Hitz Aug 03 '15 at 19:19

score 0 · Answer 2 · answered Aug 03 '15 at 18:44

Try this:

<div>
  bla
</div>

in combination with:

div {
  padding:          80px;
  background-color: red;
  border-top:       5px double black;
  border-bottom:    3px dotted black;
}

See http://jsfiddle.net/4ghvvke3/ to get the idea.

Or do I misunderstand your question, and do you wish to have a line behind your main box object? I that case I advise background-image of 1px width with x-repeat, probably less bytes than all the CSS code.

nextstep · Answer 3 · 2015-08-03T18:54:57.517

0

I made a simple fiddle to demonstrate the simplest way of achieving this.

<div id="box">

<hr class="line1">
<hr class="line2">

</div>

And CSS:

#box {
    width: 85%;
    margin: 0 auto;
}

.line1 {
  width: 100%;
}

.line2 {
    width: 100%;
}

This uses the hr property to draw 2 lines horizontally, in this case taking up 100% width of the parent container.

Or something like this for thinner lines.

edited Aug 03 '15 at 18:54

answered Aug 03 '15 at 18:46

nextstep

1,399
3
11
26

How is this similar to http://codepen.io/anon/pen/gpZqOQ ? – Hitz Aug 03 '15 at 18:52
You asked for a simple way to achieve this using CSS, this is it. Just modify the code to accommodate your heading. – nextstep Aug 03 '15 at 18:57

score 0 · Answer 4 · answered Aug 03 '15 at 18:54

Demo

using :before and :after like you have it, i added a classname instead of random ids

<h1 class="feedback">
    <span>Feedback</span>
</h1>

css

.feedback {
  position: relative;
  text-align: center;
}

.feedback span {
  box-sizing: border-box;
  color: rgb(189, 195, 199);
  display: inline-block;
  height: 45px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  z-index: 10;
  perspective-origin: 54.4375px 22.5px;
  transform-origin: 54.4375px 22.5px;
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 3px solid rgb(189, 195, 199);
  font: normal normal bold normal 15px/normal Montserrat, sans-serif;
  outline: rgb(189, 195, 199) none 0px;
  padding: 10px 20px;
  transition: all 0.2s ease 0s;
  position: relative;
  z-index: 1;
}
.feedback:before,
.feedback:after {
  content: '';
  display: inline-block;
  border: 1px solid rgb(189, 195, 199);
  width: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
}

.feedback:before {
  top: 40%;
}

.feedback:after {
  bottom: 40%; 
}

score 0 · Answer 5 · answered Aug 03 '15 at 19:09

.container {
  width: 100%;
  margin-top:3em;
  text-align:center;
}
.feedback_box {
  color: rgb(189, 195, 199);
  line-height:45px;
  text-align: center;
  text-transform: uppercase;
  background: rgb(255, 255, 255);
  border: 3px solid rgb(189, 195, 199);
  font: normal normal bold normal 15px/normal Montserrat, sans-serif;
  padding: 1em;
  z-index:4;
  position:relative;
}
.line1, .line2 {
  border:0;
  height:3px;
  background:rgb(189, 195, 199);
}
.line1 {
  margin-bottom:-20px;
}
.line2 {
  margin-top:-20px;
}

<div class="container">
  <hr class="line1">
   <span class="feedback_box">Feedback</span>
  <hr class="line2">
</div>

Two horizontal lines across a box

5 Answers5