时间戳

首页 > 解决方案 > 如何在文本末尾显示下划线？

html - 如何在文本末尾显示下划线？

问题描述

我在最后显示的标题下方显示下划线，但在移动设备中我遇到了一个问题。我必须在标题文本的末尾显示下划线。截至目前，它显示在最后。

注意：我只需要显示下划线的 75px 宽度（我会根据需要增加）。每个部分都有不同的标题，所以我必须在 75px 上显示。

桌面

在此处输入图像描述

移动的

在此处输入图像描述

这是我的预期输出

在此处输入图像描述

.section-title h2 {
  position: relative;
  display: inline-block;
}

.section-title h2::before {
  content: "";
  border-bottom: 4px solid #E43D32;
  position: absolute;
  display: block;
  width: 75px;
  right: 0;
  bottom: -8px;
}
.section-title h2 span{color:red;}
 
@media all and (max-width: 768px) {
  .section-title h2 {
    font-size: 40px;
  }
}
<div class="section-title">
  <h2><span>OTHER</span> SUPER HEADING</h2>
</div>

标签： htmlcss

解决方案

<div class="section-title">
  <h2><span>OTHER</span> SUPER <u>HEADING</u></h2>
</div>

只需使用下划线标签

输出

<div class="section-title">
  <h2><span>OTHER</span> SUPER HEAD<u>ING</u></h2>
</div>

[![Output][2]][2]

推荐阅读