如何将边框底部应用于多行文本？

Question

我正在使用border-bottom来访问我网站上的所有CAT。一两个字就很棒。在尝试将其应用于超过句子的CTA时，单词在移动设备上断开，而边框底部仅影响句子的最后一行。如何使border-bottom影响文本行？我不想在悬停时使用下划线，而且下划线不会给我想要的1px边框。

查看桌面，移动设备和标签here

的图片

Answer 1

这似乎对我有用！

.underline {
  border-bottom: 1px solid black;
}

<span class="underline">Read more on research, empathy and personas on Medium</span>

Answer 2

该转换可以应用于伪元素:: before或::之后不是文本的下划线。

＆＃13;

＆＃13;

div
{
text-decoration:underline;
}

＆＃13;

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</div>

＆＃13;

＆＃13;

＆＃13;

为所有单词加下划线...希望这有效

Answer 3

试试这个！

＆＃13;

＆＃13;

div
{
display:inline;
border-bottom: solid 1px #000
}

＆＃13;

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
</div>

＆＃13;

＆＃13;

＆＃13;