CSS/Javascript挑战-希望只为文本居中的最后一行实现边框底部

我想为项目上的按钮实现此布局

我尝试过的事情

本报告的建议 但它只适用于左对齐文本，而我想实现一个文本对齐居中按钮

上述帖子表明：

a{
位置：相对位置；
显示：内联
}
a:以后{
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
高度：1px；
边框底部：1px实心#000；
内容：“”
}

将文本对齐：居中放置在（链接）标记上。

在锚定标记上尝试此操作

文本对齐：居中

---

您可以使用JavaScript实现这一点。通过这种方式，您可以将任何CSS应用于您的链接，而不必担心它

查找并突出显示最后一行单词的JavaScript算法：

遍历所有链接。如果只需要将此样式应用于一个图元，请跳过此步骤

获取元素的文本（

innerText

）

按空格（“”）符号拆分文本

从块中删除所有元素

用单词添加

span

s，用空格添加

span

s（同时将此

span

s保存到数组）

使用

span

矩形的最高位

top

最低位

left

对该数组进行排序，以获取最后一行的第一个字

获取此数组的顶部元素

向this元素及其下一个同级添加高亮显示类

highlightLastLineForLinks（）；
//在调整窗口大小时应用高亮显示
window.addEventListener（“resize”，highlightLastLineForLinks）；
//查找所有兄弟姐妹的实用方法
函数getNextSiblings（元素、过滤器）{
var-sibs=[]；
while（elem=elem.nextSibling）{
如果（！filter | | filter（elem））同位推送（elem）；
}
返回同胞；
}
函数highlightLastLineForLinks（）{
var元素=document.querySelectorAll（“a”）；
对于（var i=0；i

a{
文字装饰：无；
/*只是演示的样式*/
显示：块；
文本对齐：居中；
边缘底部：10px；
}
.下划线{
边框底部：1px纯色；
}

Hey Abhay，这不起作用。检查我尝试使用锚定标记作为容器的小提琴，从内到中，结果不是我想要的。Hi Ashish，这不能用纯css完成。我已经用javascript实现了这个解决方案。这是小提琴。我希望这能解决你的问题。嘿@Abhay，谢谢，这确实有效，但我需要我的按钮能够响应，因此提供固定宽度是不起作用的。只需从css中删除宽度即可。那也行。可能是Hey@Vadim的复制品，谢谢，这正是我要找的。你有什么建议，从性能角度来看，在生产中使用这个可以吗？@AshishTewari嗯，这个应该非常流畅。现在的浏览器非常擅长执行JavaScript。

a{position:relative; display:inline;text-align:center;}
a:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}