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文本底部边框下划线

回答

相关问题