我无法正确定位边界线答案

【问题标题】：I cannot position the border line correctly我无法正确定位边界线
【发布时间】：2021-04-10 21:49:45
【问题描述】：

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

这是分界线。（图一）

所需输出（图 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;
      }
    }
  }

【问题讨论】：

标签： html css web sass border

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

请参考此链接：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;
  }   
}

【讨论】：