<hr> at the end of the text

Question

Very good afternoon, I’m developing a website, and the customer wants something like it’s in the image below

but I’m only getting to put it that way :

<p>We Offer Clients<br>
    Incorporation Services on a Global Scale<br>
    Free Consultation
</p><hr> 

This is what I got, I’m new here I don’t know if I can see the code

Can anyone tell me what I’m missing? Regards

Answer 1

Here is an example

You need to put the P and the HR as an inline element, so one can "align" after the other and not fall to the bottom line. Then you need to put a defined width in the HR because it loses its scope when you change the display of it, only that this way it occupies the whole screen and you may need to put this text inside a container with overflow:hidden to better control the effect...

.box {
    width: 30%;
    border: 1px solid #000;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.box p {
    display: inline;
}
.box hr {
    display: inline;
    width: 100%;
    position: absolute;
}

<div class="box">
    <p>We Offer Clients<br>
        Incorporation Services on a Global Scale<br>
        Free Consultation
    </p>
    <hr>
</div>