html - 需要固定:after content dynamical after the heading text的位置

Question

我需要/////////出现在标题文本之后，每个 block 的标题可能不同。

输出:

标记///////////////

联系///////////

HTML

<div class="exp-tags exp-left-detail-block">
    <h4><span>Tags</span></h4>
</div>
<div class="exp-tags exp-left-detail-block">
    <h4><span>Contact</span></h4>
</div>

CSS

.exp-left-detail-block h4 > span{background:#fff;padding:0 12px 0 0;position:relative;}
.exp-left-detail-block h4 > span:after{
    content: "////////////////////////////////////";
    color: #e4e4e4;
    position: absolute;
    display: block;
    left:0;
    right: 0px;
    top: 5px;
    width: 500%;
    height: 28px;
    font-size: 15px;
    font-style: italic;
}

jsFiddle

Answer 1

Demo

 Remove position: absolute and disply:block from your pseudo css

如果你想要这两个属性，可以不使用pseudo。就到那个 dom。