我想在span标记之后放置点(从一个标签到另一个标签,指向),但样式在文本之后出现在标记内。如何制作:: 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>
答案 0 :(得分:0)
我认为这个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%;
}