如何在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中給字母組加下劃線

回答

相關問題