title: creating vertical & horizontal 'strikethrough'
body: <p>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</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="footer-btn-wrap"&gt;
      &lt;div class="decor"&gt;&lt;a href="... &lt;/div&gt;
  
      &lt;div class="or"&gt;
         &lt;div class="above"&gt;&lt;/div&gt;
         &lt;h4&gt;or&lt;/h4&gt;
         &lt;div class="below"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="decor"&gt;&lt;a href="... &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.or { // name of containing div}
  .or .above { border: 1px left solid }
  .or .below { border: 1px left solid }
  </code></pre>
  
  <p>but can't get them to center. </p>
  
  <p>Visually, I am trying to accomplish the following between the buttons</p>
  
  <p><img src="https://i.stack.imgur.com/wEjjz.png" alt="enter image description here"> </p>
  
  <p>Secondly, When in mobile I want the lines to go through horizontally (the buttons will be stacked and it will in in between)</p>