pseudo element after does not go right

Question

I made a span and gave width to him of 800px.

I put a small text in it and added a after in the hope that this afyer is the final meaning of span glued to the right.

But it stayed glued to the text, what is wrong?

  div.duvidas > div > span:after {
    display: inline-block;
    content: '+';
    width: 50px;
      height: 50px;
      line-height: 50px;
    text-align: center;
  }

Answer 1

Face has many ways to align the + right, you have to see what is best for your case, because you can put float:right in the ::after, or even display:flex in the span and margin-left: auto in the ::after which is what I would do, until <span> is an element inline and even you put width of 800px it does not render with 800px because it is inline it occupies only the size of the text that is inside, and not the value that you determine as width

See the image to see that 0 800px does not apply the width, for the <span> is an element inline

Now the code

Here is an option for you to align the ::after to the right of container, putting display:flex in the span for him to keep the 800px in fact, and margin-left:auto in the ::after for him to go to the right corner.

span {
  width: 800px;
  border: 1px solid #000;
  line-height: 50px;
  display: flex;
}

div.duvidas > div > span:after {
  display: inline-block;
  content: '+';
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: auto;
}

<div class="duvidas">
  <div>
      <span>Lorem ipsum dolor, officia!</span>
  </div>
</div>