HTML 文本边框-底部下划线

<分区>

我有文字需要加下划线

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

所以它应该是这样的

Underlined 
   ---
blah blah

我正在使用 SASS/SCSS，我尝试使用 :before 元素，但它没有显示出来。

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

我几乎什么都试过了。我试过 span:before span::before .text:before .text::before 等，但它没有显示任何内容。

最佳答案

这样的事情怎么样？

请注意，: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>

关于HTML 文本边框-底部下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33913815/

上一篇：html - CSS:在保持纵横比的同时居中和放大或缩小图像

下一篇：jquery - 根据类别更改图像 src

HTML/CSS 将 DIV 对齐到页面底部和屏幕 - 以先到者为准

html - HTML 文件 : how to separate CSS rules when classes and id's can be the same? 中有多个 "HTML"标签

css - Sass – 连接到@at-root 选择器

javascript - 我如何呈现条件样式(React + Sass)

html - HTML 文档所需的标签应该如何缩进？

html - CSS 菜单在悬停时重叠

html - 复选框只影响一个元素？

html - 如何在 <li> 中对齐多个 <span>

next.js - NextJS 错误 - HookWebpackError : Expected a pseudo-class or pseudo-element