Make sure each line in button has all the attributes

Question

I'm trying to achieve the underline for all parts of my button. I tried using -webkit-box-decoration-break property, it didn't work.

Both first line (New Delhi,) and last line (India) should have underline. Since it's due to break in the box, I tried the box-decoration-break property, but it didn't work out. Please guide me where I am going wrong.

Answer 1

You can add border-bottom : 1px solid #cccccc;. and if it's too close to your element (e.g. button) you can add padding-bottom : 5px to solve your issue.

Answer 2

The only thing you can do is use text-decoration: underline. Think of a button and the text inside it as a box. The line you are trying to draw will always be at the sides of that rectangle. When the text is wrapped (e.g., because the box is not wide enough), the rectangle just increases in height and keeps drawing the line at the bottom. Have a look at this Mozilla doc about CSS text-decoration or this Mozilla doc about CSS border.