html - 绝对定位的内容不适用于移动设备

Question

在我的<h3>标题中，我添加了一些内容:before。此内容看起来像一个底部边框。
我border用position: absolute, 和定位它top: 40px。

在大屏幕上，它工作正常，但在小屏幕上，有一些问题，我认为是因为顶部位置。我该如何解决这个问题？

.module-head {
  text-align: left;
  position: relative;
  margin: 40px 0
}

.module-head-title {
  color: #32384d;
  font-weight: 600;
  font-size: 30px;
  display: inline-block
}

.module-head:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 40px;
  background: #32384d;
  width: 200px;
  max-width: 250px;
  height: 5px
}

<div class="module-head">
  <h3 class="module-head-title">Újdonságok, akciós termékek</h3>
</div>

标签： htmlcss

Answer 1

我解决了。它不需要绝对位置，只需要显示块。