Question

我的文字需要加下划线

<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等之前，但它没有显示任何内容。

Answer 1

这样的事情怎么样？

请注意，:after和:before等伪元素需要设置content属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试一试：

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

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

HTML文本边框底部下划线

2 个答案: