:: afterはタグ内のテキストの後に適用されます

Question

スパンタグの後ろに点を配置したい（ラベル間でポイントをつける）が、スタイリングはテキストの後にタグの内側に表示されます。 :: afterの作り方は<span>タグの直後に表示されますか？

.param-name { 
 
    display: inline-block; 
 
    width: 48%; 
 
} 
 
.param-value { 
 
    display: inline-block; 
 
    width: 52%; 
 
} 
 
.param-value-inner { 
 
    position: relative; 
 
    display: block; 
 
} 
 
.param-name-inner { 
 
    position: relative; 
 
    padding: 0 10px 0 0; 
 
    background: inherit; 
 

 
} 
 
.param-name-inner::after { 
 
    position: absolute; 
 
    right: 5px; 
 
    left: 0; 
 
    height: 1px; 
 
    margin: .85em 0 0; 
 
    content: ''; 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAAAAAA+i0toAAAAAnRSTlMA/1uRIrUAAAAMSURBVHheY7j1/z8ABY8C2UtBe8oAAAAASUVORK5CYII=) 0 0 repeat-x; 
 
}

<dl class="product-full-params"> 
 
    <dt class="param-name"> 
 
    <span class="param-name-inner">param</span> 
 
    </dt> 
 
    <dd class="param-value"> 
 
    <span class="param-value-inner">value</span> 
 
    </dd> 
 
</dl>

Answer 1

私はこのCSSがうまくいくと思う：

.param-name-inner::after { 
    height: 1px; 
    content: ''; 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAAAAAA+i0toAAAAAnRSTlMA/1uRIrUAAAAMSURBVHheY7j1/z8ABY8C2UtBe8oAAAAASUVORK5CYII=) 0 0 repeat-x; 
    display: inline-block; 
    vertical-align: top; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
}