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

debugcn 发表于 Dev

瓦列留92

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

第二件事，我应该对活动文本应用什么属性，以使其不如实际大胆？

我试图做一些事情，但我无法弄清楚……这是我的代码：

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

Fahad Hasan |

而不是使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。