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?

Answer 1

Use border.

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

Answer 2

Instead of underline, create bottom border,

border-bottom:1px solid #000;

Answer 3

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;.

Answer 4

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>

Answer 5

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;
    }