::在标签内的文本后应用

时间:2016-10-27 06:20:07

标签: html css

我想在span标记之后放置点(从一个标签到另一个标签,指向),但样式在文本之后出现在标记内。如何制作:: after恰好出现在<span>标签之后?

it's not right, should be outside the 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>

1 个答案:

答案 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%;
}
相关问题