0

This is what I have right now but I need to adjust the gap of the two lines on the header with each other so it may look like the horizontal rule at the bottom.

Thing is when I adjust it at make it border-top: 5px double black;, it makes the lines thick when I need it to only be separated more and keep it thin.

Here's my HTML:

<h4><span>Sample sample sample</span></h4>
<p>lorem ipsum</p>
<hr>

Here's my CSS:

h4 {
    width: 100%;
    text-align: center;
    border-top: 4px double black;
    height: 10px;
    line-height: 0.1em;
    margin: 30px 0;
    font-size: 29px;

    span {
        background-color: white;
        padding: 0 10px;
    }
}

hr {
    border-bottom: 1.5px solid black;
    border-top: 1.5px solid black;
    border-left: none;
    border-right: none;
    height: 10px;
}

And here's a fiddle for it.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
Suika
  • 660
  • 2
  • 10
  • 30
  • The tagged duplicate only needs a single line - it's not the same as the issue here. – Suika Jan 21 '16 at 11:05
  • 1
    It is...you can style the pseudo-elements any way you want. - http://codepen.io/Paulie-D/pen/a157c0c8a3e616480177812c9c433808 – Paulie_D Jan 21 '16 at 11:13
  • Oh, you're right. I tried to make the border to `double` to give it a shot. How does duplicate questions work anyway? Do I have to take it down? Do you add your comment as an answer? – Suika Jan 21 '16 at 11:24
  • Nope, just leave it as it is. It's fine. Now that 's it marked as a duplicate it can act as a pointer to future users with the same issue. – Paulie_D Jan 21 '16 at 12:57

1 Answers1

0

Remove one border from this:

hr {
    /* border-bottom: 1.5px solid black; */
    border-top: 1.5px solid black;
    border-left: none;
    border-right: none;
    height: 10px;
}

Fiddle: http://jsfiddle.net/anh7qtd1/

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Sorry no I need the header lines to be the same as the footer lines. I need to increase the gap of the lines with each other on the top. – Suika Jan 21 '16 at 11:04
  • @Suika Wait, you are confusing me. You want a border for the heading, and one for the footer right? – Praveen Kumar Purushothaman Jan 21 '16 at 11:05
  • @Suika Do me a favour. Show me a image or sample of what you wanna achieve. Will you? – Praveen Kumar Purushothaman Jan 21 '16 at 11:07
  • It's already on the fiddle. See the styling of the lines for the `
    `? I need that to be applied to `

    ` as well because right now they are TOO CLOSE to each other when I need them as apart as the lines on the `
    ` is. The lines below the Lorem Ipsum are what I want to achieve.

     – Suika Jan 21 '16 at 11:09
  • @Suika I said you in simple terms, I am unable to understand what you want. Can you do it in Paint or someway, show me an image of what you want? So that it is easy for us. Deal? `:)` – Praveen Kumar Purushothaman Jan 21 '16 at 11:10