title: css before and after line's vertical aligning
body: <p>I am trying to vertical-align 2 lines and a title. But it doesn't work correctly. My <strong>html</strong> code is-</p>
  <pre><code>&lt;div class=&quot;content-fluid&quot;&gt;
      &lt;div class=&quot;row d-flex justify-content-center m-0&quot;&gt;
          &lt;div class=&quot;our-service-head&quot;&gt;
              &lt;p class=&quot;our-service-title text-center&quot;&gt;Our Services&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and <strong>style.css</strong>:</p>
  <pre><code>.our-service-title{
      color: #222222;
      font-size: 24px;
      font-weight: 600;
  }
  
  .our-service-title:before, .our-service-title:after{
      content:&quot; &quot;;
      display: inline-block;
      vertical-align: super;
      margin-left: 10px;
      margin-right: 10px;
      width: 30px;
      height: 3px;
      background-color: #FFC000;
  }
  </code></pre>
  <p>it shows like the following output:</p>
  <p><a href="https://i.stack.imgur.com/sy8YY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sy8YY.jpg" alt="enter image description here" /></a></p>
  <p>How can I align this correctly?</p>