具有以下边界：影响下一个元素后？

Question

我正在尝试使用span为:after元素添加边距。

.container {
  display: flex !important;
  justify-content: flex-start !important;
}

.title-border {
  width: 3px;
  height: 20px;
  content: '';
  background: rgb(102, 46, 145);
  &:after {
    display: inline-block margin: 0 8px content: ''
  }
}

.horizontal {
  display: inline-block;
  box-sizing: inherit;
  white-space: nowrap;
}

<div class="container">
  <span class="title-border">
      <span class="horizontal">
        Some text
      </span>
  </span>
</div>

但是，根本没有边距（紫色边框和文字之间应该有空格）：

为什么会这样以及如何解决？

Codepen：https://codepen.io/alexcheninfo/pen/JOepyM

Answer 1

给一些填充：.horizo​​ntal {padding-left：10px;}

.container {
   display: flex !important;
   justify-content: flex-start !important;
}

.title-border {
  width: 3px;
  height: 20px;
  content: '';
  background: rgb(102, 46, 145);
  &:after {
    display: inline-block
    margin: 0 8px
    content: ''
  }
}

.horizontal {
  display: inline-block;
  box-sizing: inherit;
  white-space: nowrap;
  padding-left: 10px;
}

<div class="container">
  <span class="title-border">
  <span class="horizontal">
    Some text
  </span>
</div>

Answer 2

试试这段代码

使用

.title-border ::after {
  display: inline-block;
  margin: 0px 8px;
  content: 'try this';
}

而不是

  &:after {
    display: inline-block margin: 0 8px content: ''
  }

在margin: 0px 10px;

中添加.title-border

＆＃13;

＆＃13;

.container {
  display: flex !important;
  justify-content: flex-start !important;
}

.title-border {
  width: 4px;
  height: 20px;
  content: '';
  margin: 0px 10px;
  background: rgb(102, 46, 145);
}

.title-border::after {
  display: inline-block;
  content: '';
}

.horizontal {
  display: inline-block;
  box-sizing: inherit;
  white-space: nowrap;
}

＆＃13;

<div class="container">
  <span class="title-border"></span>
  <span class="horizontal">
     Some text
  </span>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需添加padding-left in＆＃39; .horizo​​ntal＆＃39;类

.container {
     display: flex !important;
     justify-content: flex-start !important;
}

.title-border {
    width: 3px;
    height: 20px;
    content: '';
    background: rgb(102, 46, 145);
}

.horizontal {
    padding-left: 8px;
    display: inline-block;
    box-sizing: inherit;
    white-space: nowrap;
}