HTML文本底部邊框下劃線

-1

<div><span class="text">Underlined</span><br>blah blah</div>

文本因此，它應該是這樣的

Underlined 
    --- 
blah blah

我使用SASS/SCSS，我曾嘗試使用：但在元素之前，它並沒有顯示出來。

&>div { 
    // code 
     &:before { 
     //other code 
     } 
    } 
    .text { 
     font-weight: bold; 
     &:before { 
      border-bottom:red solid 1px; 
     } 
    } 
}

我已經嘗試從字面上的一切。我曾嘗試跨度：之前span::before.text:before.text::before等，但它沒有顯示任何東西。

來源

2015-11-25 baconsandwich2

只有{的.text下邊框：1px的黑色虛線; }不起作用？ –

由於保羅Menezes提到檢查這個小提琴http://jsfiddle.net/mxjxgs4j/ –

已經在這裏回答[見這裏]（http://stackoverflow.com/questions/32706932/dotted-top-and-bottom-border-shorter -than-text） – Allen

這樣的事情呢？

請注意，像:after和:before這樣的僞元素需要content屬性集。

span { 
 
    position:relative; 
 
    display:inline-block; 
 
    padding-bottom:20px; 
 
} 
 

 
span:after { 
 
    content:""; 
 
    position:absolute; 
 
    bottom:10px; 
 
    left:50%; 
 
    display:inline-block; 
 
    width:22px; 
 
    margin-left:-11px; 
 
    border-bottom:red dashed 1px; 
 
}

<div> 
 
    <span class="text">Underlined</span> 
 
    <br> 
 
    blah blah 
 
</div>

來源

2015-11-25 10:26:55

如果在SO上這裏已經回答了一個問題，則適當的操作是將其標記爲重複，而不是回答它。 – cimmanon

這給一個鏡頭：

div{ 
 
display:inline-block; 
 
text-align:center; 
 
} 
 
span{ 
 
    display:block; 
 
    border-bottom:1px dashed; 
 
}

<div><span class="text">Underlined</span>blah blah</div>

來源

2015-11-25 10:28:23

HTML文本底部邊框下劃線

回答

相關問題