Two horizontal lines across a box [duplicate] - html

Question

This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
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?

Answer 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%;
}

Answer 2

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.

Answer 3

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%;
}

Answer 4

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.

Answer 5

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