如何在HTML和CSS中为字母组加下划线

我有一个文本“重置”，我需要像这样给它加下划线：RE必须加下划线，S必须加虚线下划线，ET必须加下划线；问题是字母“S”必须有两个破折号

第二件事，我应该在活动文本上应用什么属性，使其不那么粗体

我试图做些什么，但我想不出来…这是我的代码：

HTML:

---

对于底部边框，可以使用“边框底部宽度”属性

<li class="active"><a href="#"><u>R</u><u>E</u><span style="border-bottom-style:  dotted ; border-bottom-width:5px">S</span><u>ET</u></a></li>

---

对于字体使用

字体重量：正常

代替使用

文本装饰：在两个字母上划下
，在一个没有水平对齐线条的字母上划下
边框底部
，您可以将
RE
和
ET
包装在
内部和
S
内部，然后使用
边框底部
设置样式。下面是一个演示：


。第8节{
宽度：100%；
高度：200px；
文本对齐：居中；
边框：1px纯黑；
}
.内容8{
宽度：100%；
高度：100px；
边框：1px纯红；
}
#导航8{
列表样式：无外无；
字体大小：25px；
位置：绝对位置；
左缘：14.5%；
利润上限：-17px；
颜色：#6e6e；
字母间距：4px；
}
#导航8里{
光标：指针；
浮动：左；
保证金：0；
宽度：160px；
高度：50px；
线高：50px；
位置：相对位置；
文本对齐：居中；
颜色：红色；
}
#导航8 a{
颜色：#7b7979；
文字装饰：上划线；
}
划线{
边框底部：1px纯黑；
}
span.singleunderline{
边框底部：1px黑色虚线；
}

合伙人













有一种方法可以在字母s下始终画两条破折号：


.reset{
显示：内联；
字体系列：arial；
字体大小：65px；
}
.重置：激活{
字号：100；
}
.re{
边框底部：1px实心#000；
}
s{
显示：内联块；
位置：相对位置；
右边框：2px实心#fff；
左边框：2倍实心#fff；
}
s:以前{
内容：“；
边框底部：1px实心#000；
宽度：45%；
位置：绝对位置；
左：0；
底部：0；
}
s:之后{
内容：“；
边框底部：1px实心#000；
宽度：45%；
位置：绝对位置；
右：0；
底部：0；
}
.et{
边框底部：1px实心#000；
}

重置
很好的解决方案，但是如果你改变字体大小，你会得到一条或多条虚线，而不是两条。@Moogs这两条虚线会一直保留到34px，我相信OP已经整理好了导航菜单的样式，因为
字体大小
25px
应用到
#nav8
。没错，我有固定的文本尺寸为25px:）
.section8
{
    width:100%;
    height:200px;
    text-align: center;
    border:1px solid black;
}
.content8
{
    width:100%;
    height:100px;
    border: 1px solid red;
}
#nav8 
{
    list-style: none outside none;
    font-size:25px;
    position:absolute;
    margin-left:14.5%;
    margin-top:-17px;
    color:#6e6e6e;
    letter-spacing: 4px;

}
#nav8 li 
{
    cursor: pointer;
    float: left;
    margin: 0;
    width:160px;
    height:50px;
    line-height:50px;
    position: relative;
    text-align:center;
    color: red;
}

#nav8 a 
{
    color: #7b7979;
    text-decoration:overline;
}

<li class="active"><a href="#"><u>R</u><u>E</u><span style="border-bottom-style:  dotted ; border-bottom-width:5px">S</span><u>ET</u></a></li>