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

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

Instead of underline, create bottom border,
border-bottom:1px solid #000;

Answer 2

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

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