How to underline a text (with full width) using CSS

Question

I've this html code:

<a class="jstree-anchor  jstree-disabled textualstatements-jstreenode-parent" href="#" tabindex="-1" id="td72383_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom" role="presentation"></i>My example text</a>

And this CSS:

.textualstatements-jstreenode-parent {
        text-decoration: underline !important;
        text-decoration-color: #2eaaa1 !important;
        text-decoration-thickness: 2.5px !important;
        text-underline-offset: 2px !important;
        font-weight: bold;
        width: 100%;
        
    }

And this is rendered like:

However, I want the green line to be expanded using the full width from the block, can this be done using text-decoration?

score 1 · Answer 1 · edited Jan 18 '21 at 09:14

1

Instead of underline, create bottom border,

border-bottom:1px solid #000;

edited Jan 18 '21 at 09:14

kiranvj

32,342
7
71
76

answered Jan 18 '21 at 08:51

Abrar Malekji

111
1
4

score 0 · Answer 2 · answered Jan 18 '21 at 08:51

0

Use border.

p{
    border-bottom: 2px solid black;
}

answered Jan 18 '21 at 08:51

Zia Ahmad

150
8

score 0 · Answer 3 · answered Jan 18 '21 at 08:58

0

Put it in a div and set the bottom-line to green.

div {width: 100%; border-bottom: 1px solid #2eaaa1;}

Or if you perse want to underline, you can expand the a text with spaces: a lot of & nbsp;.

answered Jan 18 '21 at 08:58

user2182429

1
4

score 0 · Answer 4 · answered Jan 18 '21 at 09:03

This solution works for me.

Here is an explanation already on stackoverflow CSS Styling text areas like notebook-look

.textualstatements-jstreenode-parent {
  font-weight: bold;
  width: 100%;
  border-bottom: solid #2eaaa1 2.5px;
  display: inline-block;
}

<a class="jstree-anchor  jstree-disabled textualstatements-jstreenode-parent" href="#" tabindex="-1" id="td72383_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom" role="presentation"></i>My example text</a>

score 0 · Answer 5 · answered Jan 18 '21 at 09:18

You are trying to make width 100% for an anchor tag which is an inline element. width:100% will not have any effect unless the element is block or inline-block.

Try this

.textualstatements-jstreenode-parent {
        text-decoration: underline !important;
        text-decoration-color: #2eaaa1 !important;
        text-decoration-thickness: 2.5px !important;
        text-underline-offset: 2px !important;
        font-weight: bold;
        width: 100%;
        display: block;
    }

How to underline a text (with full width) using CSS

5 Answers5