我无法正确定位边界线

Question

我无法在移动视图中正确定位边界线。有什么建议吗？

这是分界线。 (图1)

期望的输出（图 2）

我的输出（图 3）

这是我的代码

&__lines {
    &::before {
      content: '';
      display: block;
      background-image: url('/img/title_lines.png');
      width: 1220px;
      max-width: 100%;
      height: 8px;
      margin: 0 auto;
      @include sp {
        background-image: url('/img/title_lines.png');
        background-repeat: no-repeat;
        background-size: 10 0% 7px;
      }
    }
  }

Answer 1

请在 span 标签中添加文本并为 span 提供背景颜色和填充

<h2 class="lines"><span>New Arrivals</span></h2>
.lines span{
        background: #fff;
        padding: 0 10px;
}

Answer 2

你能检查一下下面的代码吗？希望它对你有用。我们已经在.line元素中设置了一个图案图片作为背景，并使h2成为inline-block，所以我们不需要添加伪元素。

请参考这个link：https://jsfiddle.net/yudizsolutions/718ybLan/6/

.lines{
  position:relative;
  background: url("https://ucarecdn.com/73760f64-cf10-4e79-8471-bd095f9dc0b6/slash.png") repeat-x center center / auto 10px;
  text-align: center;
  h2{
    font-size:32px;
    line-height:42px;
    text-transform:uppercase;
    margin:0px;
    padding: 0px 20px;
    background-color:#fff;
    display:inline-block;
    position:relative;
  }   
}

我无法正确定位边界线

I cannot position the border line correctly

html

css

border

sass

web