CSS - 定位伪元素

Question

我在伪元素之后定位这个问题。如果我尝试定位它，它将无法响应。 这就是我所拥有的：

.intro>h1::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -140px;
  width: 100px;
  left: calc(50% - 50px);
  border-bottom: 7px solid rgba(49, 42, 96, 1);
}

它在桌面上正常定位，但在移动设备上定位不佳。

我如何解决这个问题，我们将不胜感激。 感谢。

Answer 1

试试这个

.intro>h1::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    width: 100px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 7px solid rgba(49, 42, 96, 1);
}
h1{
    position: relative;
    display: inline-block;
}

Answer 2

这适合我。

.intro>h1::after {
  content: "";
  display: block;
  position: relative;
  bottom: -20px;
  width: 100px;
  margin: 0px auto;
  border-bottom: 7px solid rgba(49, 42, 96, 1);
}