html - 如何在 HTML 和 CSS 中给字母组加下划线

Question

我有一个文本“RESET”，我需要这样加下划线:RE 必须加下划线，S 必须加下划线，ET 必须加下划线；问题是字母“S”必须有 2 个破折号。

第二件事，我应该在事件文本上应用什么属性，使它的粗体不如实际的粗体？

我想做点什么，但我想不出来...这是我的代码:

HTML:

<div class="section8">
            <p><span style="color:#fdd400; font-size:30px">Partners</span></p>
            <div class="content8">
                <ul id="nav8">
                    <li><a href="#">RESET</a></li>
                    <li class="active"><a href="#"><u>R</u><u>E</u><span style="border-bottom-style: dotted">S</span><u>ET</u></a></li>
                    <li><a href="#">RESET</a></li>
                    <li><a href="#">RESET</a></li>
                    <li><a href="#">RESET</a></li>
                </ul>
            </div>
        </div>

CSS:

.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;
}

Answer 1

而不是使用 text-decoration: underline在 2 个字母和 border-bottom 上在一个不水平对齐线条的字母上，您可以换行 RE和 ET里面<span class="underlined">和 S里面<span class="underlined">然后使用 border-bottom 设置样式.这是一个演示:

.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;
}
span.underlined {
  border-bottom: 1px solid black;
}
span.singleunderline {
  border-bottom: 1px dashed black;
}

<div class="section8">
  <p><span style="color:#fdd400; font-size:30px">Partners</span>
  </p>
  <div class="content8">
    <ul id="nav8">
      <li><a href="#">RESET</a>
      </li>
      <li class="active"><a href="#"><span class="underlined">RE</span><span class="singleunderline">S</span><span class="underlined">ET</span></a>
      </li>
      <li><a href="#">RESET</a>
      </li>
      <li><a href="#">RESET</a>
      </li>
      <li><a href="#">RESET</a>
      </li>
    </ul>
  </div>
</div>