Html 如何在标题的最后一个单词上加下划线

我试图有相同的标题风格如下

我的问题是有下划线，我尝试使用

title:after

但没有得到我需要的确切效果

我的代码

<h1>Sign In</h1>

<style>
  h1:after{
    content: '';
    position: relative;
    width: 102px;
    height: 10px;
    background-color: rgba(40,84,161,1);
 }
</style>

登录
h1：之后{
内容：''；
位置：相对位置；
宽度：102px；
高度：10px；
背景色：rgba（40,84161,1）；
}

登录
.文本下划线{
文字装饰：下划线；
文字装饰颜色：蓝色；
}

将要加下划线的单词放入

标记中。例如：

<h1>Sign <u>In</u></h1>

登录

我认为你不能完全用CSS来完成。 如果它将在整个项目中重复出现，请尝试使用以下方法：

h1
{
  text-decoration:none;
}

h1::last-word
{
  text-decoration:underline rgba(40,84,161,1);
}

如果这是一种罕见的情况，请将最后一个单词用div或span标记括起来（正如我写这篇文章时得到答案的其他撰稿人所建议的那样）。

方法1：

只需使用默认的html标记作为下划线，它将自动为您添加下划线。为了实现此目的，您在下面的u标记示例中包装了要添加下划线的文本：

<h1>Sign <u>In</u></h1>

---

您可以使用javascript拆分标题的内容，并将最后一个单词包装在一个span中，以

边框底部为样式

在这个示例中，我向您展示了如何使用一个可重用的函数来完成这项工作，该函数将包装最后一个单词，而不管字符串大小如何


函数二（元素）
{
var pieces=element.innerHTML.split（“”）；
var last=pieces.pop（）；
var first=件。连接（“”）；
element.innerHTML=first+“”+last+“”；
}
var elements=document.queryselectoral（“.underline end”）；
元素。forEach（x=>tword（x））
。下划线结束>span{
垫底：2件；
边框底部：5px纯蓝色；
}
登录
登录
签名
甚至更长的东西
你能分享html和css吗？您使用的是特定的引导组件吗？最好的方法是使用span元素来包装最后一个单词，并使用底部边框进行样式设置。如果您希望自动执行此操作，则纯CSS不可能做到这一点。我不太清楚您想做什么，因为在您给出的示例中，“下划线”不只是最后一个单词。如果你能举更多的例子，或者仅仅是为了“登录”这个词，那么
中的
就没有意义了。一个
会更实用对不起，习惯的力量，也许会改变
<h1>Sign <u>In</u></h1>

<h1>Sign <span class="ul">In</span></h1>

.ul {
   text-decoration: underline;
 }