CODEWITHSUNDEEP
htmlcsstextunderline
Stef Heyenrath
Stef Heyenrath

Reputation: 9820

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

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: enter image description here

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

Upvotes: 1

Views: 2709

Answers (5)

kiranvj
kiranvj

Reputation: 34107

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

Upvotes: 0

Abrar Malekji
Abrar Malekji

Reputation: 111

Instead of underline, create bottom border,

border-bottom:1px solid #000;

Upvotes: 1

Sonny Fishback
Sonny Fishback

Reputation: 21

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>

Upvotes: 0

user2182429
user2182429

Reputation: 1

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

Upvotes: 0

Zia Ahmad
Zia Ahmad

Reputation: 190

Use border.

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

Upvotes: 0

Related Questions