如何在 CSS [重复] 中指定文本装饰下划线的宽度

【问题标题】：How can i specify the width of text-decoration underline in CSS [duplicate]如何在 CSS [重复] 中指定文本装饰下划线的宽度
【发布时间】：2019-06-25 00:01:28
【问题描述】：

CSS 中有属性'text-decoration: underline'。我遇到了一个实现，我必须在文本宽度的一半处放置一条线，并且下划线需要居中，作为附加图像

如果有人告诉我如何在 CSS 中指定下划线的宽度或如何实现该样式，那就太好了。

required style

【问题讨论】：

jsfiddle 上也有一个带有代码的示例。试试jsfiddle.net/9e27b
@Prasann 谢谢人

标签： html css reactjs

【解决方案1】：

您可以使用:before 来执行此操作，它还允许您调整下划线的宽度并相应地设置样式。

p {
font-size: 30px;
display: inline-block;
padding-bottom: 10px;
position: relative;
}

p:before {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid #333;
}

&lt;p&gt;HEADLINE&lt;/p&gt;

【讨论】：

我正在使用来自 react-router-dom 的 Navlink，这些样式不是由 navlink 选择的。课程计划员
我对 React 不是很熟悉。不能对navlink应用CSS吗？
是的，我可以将这些样式应用到 NavLink 并且 :before 语法也有效。但是我必须处理与 ReactJS 相关的事情是活动样式道具，因此只有活动链接才会获得带下划线的样式。谢谢你的回答