Line below the text

Question

I am trying to put a line under the title H3, only respecting the line size of 100px and according as justified on the left or right.

In this way:

or

However, when the screen resolution decreases (for example 1029px), the lines that are aligned to the right do not follow and move.

My code is (but it doesn’t work properly):

.box-geral-esquerda div.box-texto h3, .box-geral-direita div.box-texto h3 {
    font-size:22px;
    color:#27461f;
    line-height:42px;
}

.box-geral-esquerda div.box-texto h3:before {
    content: "";
    position: absolute;
    border-bottom: 3px solid #27461f;
    width: 100px;
    left:10px;
    top:68px
}

.box-geral-direita div.box-texto h3:after {
    content: "";
    position: absolute;
    border-bottom: 3px solid #27461f;
    width: 100px;
    right:190px;
    top:130px
}

<div class="box-geral-esquerda">
  <div class="box-texto">
    <h3>CORPORATIVO LOREM IPSUM</h3>
  </div>
</div>

<div class="box-geral-direita">
  <div class="box-texto">
    <h3>CORPORATIVO LOREM IPSUM</h3>
  </div>
</div>

How can I do this?

Answer 1

Missed putting position: relative us H3 so that the pseudo-elements, which are the lines, position themselves absolutely within the H3. With this, just use bottom and left, to the left lines, and bottom and right for the lines to the right, all with value 0.

.box-geral-direita div.box-texto h3{
   text-align: right;
}

.box-geral-esquerda div.box-texto h3, .box-geral-direita div.box-texto h3 {
    font-size:22px;
    color:#27461f;
    line-height:42px;
    position: relative;
}

.box-geral-esquerda div.box-texto h3:before {
    content: "";
    position: absolute;
    border-bottom: 3px solid #27461f;
    width: 100px;
    left:0;
    bottom:0
}

.box-geral-direita div.box-texto h3:after {
    content: "";
    position: absolute;
    border-bottom: 3px solid #27461f;
    width: 100px;
    right:0;
    bottom:0
}

<div class="box-geral-esquerda">
  <div class="box-texto">
    <h3>CORPORATIVO LOREM IPSUM</h3>
  </div>
</div>

<div class="box-geral-direita">
  <div class="box-texto">
    <h3>CORPORATIVO LOREM IPSUM</h3>
  </div>
</div>