Withは次のマージンではありません：次の要素に影響を与えた後？

Question

:afterを使用してspan要素にマージンを追加しようとしています。

はなぜ、この、どのようにされています：

.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

は

このコード

使用を試みます3210

代わりの

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

ジャストパディング左 '.horizo​​ntal' クラスに追加.title-border

.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; 
 
}

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

 
</div>

Answer 2

は、いくつかのパディングを与える：.horizo​​ntal {パディング左：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 3

でmargin: 0px 10px;を追加

.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; 
}