html - 样式标题不断插入缩略图

Question

我正在使用 bootstrap 博客风格..所以我每行都有三个缩略图。 缩略图包含图像、h3 文本和 p 文本(描述)

<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="xxx" alt="xxx">
<div class="caption">
<p class="text-muted"> <i style="font-size:1.2em;" class="glyphicon glyphicon-pencil"> </i> xxx <i style="font-size:1.2em;" class="glyphicon glyphicon-time"></i> xxx</p>
<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>
<p>xxx</p>
<a href="http://localhost/blog/Article.php?id=xxx" class="btn btn-primary btn-sm">إقرأ المزيد →</a>
<a href="#" class="btn btn-default btn-sm disabled">شاهده xxx</a>
</div>
</div>

xxx是php代码

和我的标题css代码

<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>

是

    a:hover {
    position: relative;
}

a[title]:hover:after {
    content: attr(title);
    padding: 4px 8px;
    color: #333;
    position: relative;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

所以无需悬停链接(之前):

将 h3 标题悬停后，灰色框成功显示，但它推到了底部缩略图...我尝试用 position:absolute to thumbnail 解决这个问题，但不起作用(之后):

Answer 1

我的猜测是 :after 应该有 position: absolute 将它抛出元素堆栈。