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

我有一个文本“RESET”，我需要像这样强调它：RE必须加下划线，S必须有虚线下划线，并且ET必须加下划线;问题是字母“S”必须有2个破折号。如何在HTML和CSS中给字母组加下划线

而第二件事，我应该在活动文本上应用哪些属性，使它比实际的粗体更小？

我试图做一些事情，但我不出来...这里是我的代码：

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

来源

2014-11-02 Valeriu92

而不是使用text-decoration: underline 2个字母和border-bottom上一个字母不线水平对齐的，你可以用里面<span class="underlined">RE和ET和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>

来源

2014-11-02 18:28:37

非常感谢！ – Valeriu92 2014-11-02 18:30:04

好的解决方案，但如果您更改字体大小，最终会出现一条或多条虚线而不是两条。 – 2014-11-02 18:32:05

@Moogs双破折号保持在那里直到34px，我相信OP已经应用了导航菜单的样式，因为'＃nav8'应用了'25px'的字体大小。 – 2014-11-02 18:37:34

对于底部边框您可以使用边框底宽属性

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

而对于字体使用font-weight: normal;

来源

2014-11-02 18:25:30 Muteking

这里有一种方法来总是在信中的两个破折号：

.reset { 
 
display: inline; 
 
font-family: arial; 
 
font-size: 65px; 
 
} 
 
.reset:active { 
 
font-weight: 100; 
 
} 
 
.re { 
 
border-bottom: 1px solid #000; 
 
} 
 
.s { 
 
display: inline-block; 
 
position: relative; 
 
border-right: 2px solid #fff; 
 
border-left: 2px solid #fff; 
 
} 
 
.s:before { 
 
content:""; 
 
border-bottom: 1px solid #000; 
 
width: 45%; 
 
position: absolute; 
 
left: 0; 
 
bottom: 0; 
 
} 
 
.s:after { 
 
content:""; 
 
border-bottom: 1px solid #000; 
 
width: 45%; 
 
position: absolute; 
 
right: 0; 
 
bottom: 0; 
 
} 
 
.et { 
 
    border-bottom: 1px solid #000; 
 
}

<div class="reset"> 
 
    <span class="re">RE</span><span class="s">S</span><span class="et">ET</span> 
 
</div>

来源

2014-11-02 18:34:44

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

回答

相关问题