需要修正位置:在标题文本后的内容动态之后

时间:2015-02-24 09:18:29

标签: html css

我需要在标题文本后面显示/////////,每个块的标题可能会有所不同。

输出:

标签///////////////

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

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

1 个答案:

答案 0 :(得分:1)

Demo

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

如果你想要这两个属性,你可以使用without pseudo。就在那个dom。