Html 文本下划线或边框底部自定义

你能用css实现这种下划线吗？我试着用下面的方法做，但我不能先做细线，然后在最后再做粗线

h1{
字体大小：300；
显示：内联块；
垫底：5px；
位置：相对位置；
}
h1：之前{
内容：“；
位置：绝对位置；
宽度：25%；
高度：1px；
底部：0；
左：1%；
边框底部：10px纯蓝色；
h1{
内容：“；
位置：绝对位置；
宽度：50%；
高度：1px；
底部：0；
左：5%；
边框底部：10px纯蓝色；
}
}

用于显示的测试文本
理想的最终风格

对于细线使用

h1的边框，对于粗端使用伪边框

注意，CSS不允许一个规则嵌套在另一个规则中，正如您在
h1:before
中使用
h1
时所做的那样，因为您需要SCS或SAS


h1{
字体大小：300；
显示：内联块；
垫底：5px；
位置：相对位置；
边框底部：1px纯蓝色；
}
h1：：之前，
h1：：之后{
内容：“；
位置：绝对位置；
宽度：30%；
高度：9px；
底部：-5px；
左：0；
背景：#900；
}
h1：：之后{
左：自动；
右：0；
}
显示的测试文本
使用
h1
的边框表示细线，使用伪边框表示粗端

注意，CSS不允许一个规则嵌套在另一个规则中，正如您在
h1:before
中使用
h1
时所做的那样，因为您需要SCS或SAS


h1{
字体大小：300；
显示：内联块；
垫底：5px；
位置：相对位置；
边框底部：1px纯蓝色；
}
h1：：之前，
h1：：之后{
内容：“；
位置：绝对位置；
宽度：30%；
高度：9px；
底部：-5px；
左：0；
背景：#900；
}
h1：：之后{
左：自动；
右：0；
}
显示测试文本
检查下面的示例


.underline-text4{
位置：相对位置；
垫底：5px；
显示：内联块；
颜色：蓝色；
底部边框：4px纯蓝
}
.underline-text4:：before{
位置：绝对位置；
底部：-7px；
高度：10px；
宽度：50px；
左：0；
内容：“；
背景：红色；
}     
.underline-text4:：之后{
位置：绝对位置；
底部：-7px；
高度：10px；
宽度：50px；
右：0；
内容：“；
背景：红色；
}
这是带下划线的文本3
检查下面的示例


.underline-text4{
位置：相对位置；
垫底：5px；
显示：内联块；
颜色：蓝色；
底部边框：4px纯蓝
}
.underline-text4:：before{
位置：绝对位置；
底部：-7px；
高度：10px；
宽度：50px；
左：0；
内容：“；
背景：红色；
}     
.underline-text4:：之后{
位置：绝对位置；
底部：-7px；
高度：10px；
宽度：50px；
右：0；
内容：“；
背景：红色；
}
这是带下划线的文本3
，与OP想要的完全不同我只是给了他一些提示。让我为他更新答案。：）谢谢你的朋友，投票给你的答案：D我喜欢你发布的示例样式！！当做这和OP想要的完全不一样我只是给了他一些提示。让我为他更新答案。：）谢谢你的朋友，投票给你的答案：D我喜欢你发布的示例样式！！问候@丹尼尔，不客气。请考虑接受我的回答，作为朋友，我不能给你投票，因为我缺乏15的声誉！！但是你看看！！问候和感谢@丹尼尔，不客气。请考虑接受我的回答，作为朋友，我不能给你投票，因为我缺乏15的声誉！！但是你看看！！问候和感谢！！