Abinash Koirala Abinash Koirala - 5 months ago 26
HTML Question

How can I double underline a text inside a html table cell?

Both underline should be of length corresponding to the text content. I've come across another similar question where the accepted solution was to use

.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}


But this is not what I wanted. I want the length of the double underline to be equal to the length of the text content.

Answer

I've whipped two examples.

With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.

span{
  border-bottom:1px solid #000;
  text-decoration:underline;
}
        
p{
  border-bottom:1px solid #000;
  text-decoration:underline;
  display:inline-block;
}
<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>