Html 如何在CSS中指定文本装饰下划线的宽度

CSS中有“文本装饰：下划线”属性。我遇到了一个实现，在这个实现中，我只需要放置一行文本宽度的一半，下划线需要居中，就像附加的图像一样

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

---

您可以使用

：before

执行此操作，它还允许您调整下划线的宽度并相应地设置其样式

p{
字体大小：30px；
显示：内联块；
垫底：10px；
位置：相对位置；
}
p:以前{
内容：“；
位置：绝对位置；
宽度：50%；
高度：1px；
底部：0；
左：25%；
边框底部：1px实心#333；
}

---

标题

我使用的是react router dom中的Navlink，这些样式不是Navlink选择的。我不太熟悉的课程计划。你不能将CSS应用于

navlink

？是的，我可以将这些样式应用于navlink和：在语法也起作用之前。但是我必须处理的与ReactJS相关的事情是活动样式道具，因此只有活动链接的样式才有下划线。感谢您的回答。还有一个关于JSFIDLE的示例，其中包含代码。试试@Prasann谢谢你