Adding space in both sides of rhombus

Question

I am trying to put a margin in left and right of the rhombus but couldn't.

Basically I am styling < hr > in to a custom styled hr

Code:

<div class="container">
    <hr class="square gold">
    <p>some text</p>
</div>

Demo :http://jsfiddle.net/squidraj/03xw85w0/

Any help is highly appreciated. Thanks in advance.

Are trying to do something like this - http://stackoverflow.com/questions/23584120/line-separator-under-text-and-transparent-background — Paulie_D, Apr 10 '15 at 13:35
@Paulie_D Basically in both sides(left & right) of both square or rhombus there will be a 10px space. — Raj, Apr 10 '15 at 13:38

score 2 · Accepted Answer · edited May 23 '17 at 10:24

Basically, you can't do this with an hr...you would have to use a span or some such other element.

Then you can follow the techniques as detailed in the linked question HERE.

body {
  text-align: center;
}
.divider {
  width: 70%;
  margin: 20px auto;
  overflow: hidden;
  text-align: center;
  line-height: 1.2em;
  display: inline-block;
}
.divider:before,
.divider:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  width: 50%;
  height: 0.65em;
  border-bottom: 1px solid black;
  margin: 0 2% 0 -55%;
}
.divider:after {
  margin: 0 -55% 0 2%;
}

<span class="divider">◊◊</span>

Excellent. Thank you so much..I have to change the html then. :) — Raj, Apr 10 '15 at 13:47

Adding space in both sides of rhombus

1 Answers1