How to add a small underline to text using HTML and CSS

Recently, to practice my FE dev skills I created a landing page from Figma design. In the design for the section heading there was a small border at the middle of the text. Something like this 👇

So in today's article, we will walk through implementing this with HTML and CSS.

Firstly we will create an h2 tag for our text -

<h2>Our Services</h2>

After creating this tag we will go for my favorite part that is CSS -

.heading {
    padding: 2rem 2rem;
    text-align: center;
    position: relative;
}

This will be basic CSS for heading now we will add our tiny border at center. For this, we will use :after -

.heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 3rem;
    background-color: black;
}

You can set width in % or px as per your convenience.

Tada🥳 We have our beautiful heading ready which looks like this -

Important points to remember -

• Don't forget to add position:absolute; to heading class.

• Be sure to have content:""; for :after.

That will be all for this blog.

Thank you for reading ! 🙏