Adding Line underneath a text in html that extends the length of the box

[firemillionaire]

Hello,

I am new to wordpress and have been trying to figure out how to add a line underneath text. Below is a picture of how I would like it to look.

I have tried underlining the text, but I realized then I won’t be able to make them different color.
If i simply add a page break then underline it, then the distance between the two lines are too far apart.

Can someone shed some light? Thank you!

[thai]

Hi There,

You can try with this shortcode:

[line style="background-color: blue;"]

Hope it helps

[firemillionaire]

Thank you very much Thai!

The line is appearing now, but the color remains dark grey. I tried changing to other colors or using the html color codes and none seems to be working.

In addition, is there anyway to reduce the distance between the line and the text?

Thank you!

[thai]

Hi There,

Please update the previous shortcode to this:

[line style="border-color: #31a2e9;margin-top: -10px;"]

Let us know how it goes!

[firemillionaire]

Hello Thai,

Thank you very much, this worked like a charm!

I appreciate your help as I am just a new wordpressing blogger and am learning alot along the way.

[thai]

If you need anything else please let us know.