creating vertical & horizontal 'strikethrough'

Question

I am trying to create a 'spacer' between buttons on my website, and would like it to be the word or with a vertical line, centred above and below the word. I tried

HTML

<div class="footer-btn-wrap">
    <div class="decor"><a href="... </div>

    <div class="or">
       <div class="above"></div>
       <h4>or</h4>
       <div class="below"></div>
    </div>

    <div class="decor"><a href="... </div>
</div>  

CSS

.or { // name of containing div}
.or .above { border: 1px left solid }
.or .below { border: 1px left solid }

but can't get them to center.

Visually, I am trying to accomplish the following between the buttons

Secondly, When in mobile I want the lines to go through horizontally (the buttons will be stacked and it will in in between)

Answer 1

Do they need to be borders? You could use a div that's only a few pixels wide and give it a background color.

http://jsfiddle.net/puqgko63/

<div class="footer-btn-wrap">
    <div class="decor">
        <a href="..."></a>
    </div>

    <div class="or">
        <div class="above"></div>
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="or">
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="decor">
        <a href="..."></a>
    </div>
</div>

.footer-btn-wrap
{
    width: 120px;
    background-color: #aaccee;
    color: #abddf9;
    font-family: Calibri;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: block;
    width: 50px;
    margin: auto;
    text-align: center;
}

.or .above, .or .below
{
    height: 50px;
    width: 2px;
    background-color: #abddf9;
    margin: auto;
}

---

To make it horizontal for the mobile version, you could change your elements to inline-block and then swap the width and height of the spacer div.

(The example below still needs some tweaking, but it should give you an idea of how to do it)

http://jsfiddle.net/yf6zvq7z/

.footer-btn-wrap
{
    background-color: #61b8df;
    color: #abddf9;
    font-family: Calibri;
    display: inline-block;
}

.or
{
    display:inline-block;
    height: 50px;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: inline-block;
    margin: 0 20px;

}

.or .above, .or .below
{
    display:inline-block;
    height: 2px;
    width: 50px;
    background-color: #abddf9;
    margin: auto;
    vertical-align: middle;
}

Answer 2

You can use pseudo elements.

HTML:

<div class="or">
   <h4>or</h4>
</div> 

in CSS:

.or { 
   padding: 10px 50px;
   display: block;
   position: relative;
}

.or:before {
   content: '';
   position: absolute;
   top: 0;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

.or:after {
   content: '';
   position: absolute;
   top: 55px;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

Here's a basic fiddle: https://jsfiddle.net/f1u1tsjk/1/

Obviously you'll need to customize the css per your image.

Here's a good article on how to work with Pseudo Elements: https://css-tricks.com/pseudo-element-roundup/