Lines beside in css

Question

I’m trying to put lines next to a word, but when I go into mobile resolution, the lines go up and get misaligned. How do I make them vertically aligned and of the same horizontal length?

First resolution:

Second resolution:

HTML:

<div class="e-mais">
<p>E MAIS</p>
</div>

CSS:

       .e-mais {
            text-align: center;
            font-size: 20px;
            color: #c78b2f;
        }
        .e-mais p:before, .e-mais p:after {
            content: ' ';
            position: absolute;
            width: 5%;
            border-top: 1px solid #c78b2f;
            margin-top: 1.4%;
        }

        .e-mais p:before {
            margin-left: -63px;
        }

        .e-mais p:after {
            margin-left: 5px;
        }

@media (min-width:992px) and (max-width:1199px) {
    .e-mais p:before, .e-mais p:after {
        margin-top: 1.7%
    }
    .e-mais p:before {
        margin-left: -53px;
    }
    .row.escolas {
        margin-top: 46px;
    }
}

Answer 1

Guy for this kind of thing my tip is you use the source in REM and the elements in EM.

With that you have a relative measure that works like this. 1REM is = to 16px, then if you have the font with 1rem and the ::after with 2em the font will have 16px and the ::after 32px. If already the font has 1rem and the ::after 0.5em he’s actually gonna get 8px, then EM is related to REM that is in the father understands. To make it easier to understand see the model below.

**Notice how everything grows proportional to the measures of pseudo-elements are coupled with the measure of font-size of pai REM / filho EM**

Follow the image code like this.

.texto {
  position: relative;
  display: inline-block;
  color: red;
  font-size: 1rem;
  margin: 8px;
  margin-left: 50px;
}
.texto::before,
.texto::after {
  content: "";
  position: absolute;
  top: 0.65em;
  width: 1em;
  height: 0.05em;
  background-color: red;
  left: -1.25em;
}
.texto::after {
  left: initial;
  right: -1.25em;
}

  

<div class="texto">Meu texto</div>
<br>
<div class="texto" style="font-size: 2rem">Meu texto</div>