如何使用 CSS 为文本加下划线（全宽）答案

【问题标题】：How to underline a text (with full width) using CSS如何使用 CSS 为文本加下划线（全宽）
【发布时间】：2021-01-18 08:45:09
【问题描述】：

我有这个 html 代码：

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

还有这个 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%;
        
    }

呈现如下：

但是，我希望使用块的全宽来扩展绿线，这可以使用 text-decoration 来完成吗？

【问题讨论】：

标签： html css text underline

【解决方案1】：

使用边框。

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

【讨论】：

【解决方案2】：

把它放在一个 div 中，并将底线设置为绿色。

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

或者如果你真的想加下划线，你可以用空格扩展a文本：很多。

【讨论】：

【解决方案3】：

这个解决方案对我有用。

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

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

【讨论】：

【解决方案4】：

创建底部边框，而不是下划线，

border-bottom:1px solid #000;

【讨论】：

【解决方案5】：

您正在尝试为作为内联元素的锚标记设置 100% 的宽度。 width:100% 不会有任何效果，除非元素是 block 或 inline-block。

试试这个

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

【讨论】：