CSS伪元素-使用：after将文本定位在图像下

我有一个图像，需要添加文本“点击放大”下面的图像，但只能这样做使用CSS

这就是我到目前为止所拥有的，然而，我似乎无法正确定位它。它似乎漂浮在图像的右侧。我怎样才能把它直接放在图片的下面，然后放到左边

#main_image:after{ 
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}

---

您必须添加另一个

才能执行此操作。请参阅

---

我使用了

页边距顶部：-80px

将文本放在图像上。

以下是使用伪元素添加标题的一种方法

您的HTML可能如下所示：

<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>

---

将伪元素添加到

只需添加
显示：块
：

#主图像：在{
内容：“点击图片放大”；
文本对齐：左对齐；
位置：相对位置；
边缘底部：10px；
显示：块；
}

我假设您的
#主图像
不是图像本身，而是它周围的一些包装，因为您看到的是文本

作为参考，伪元素不适用于“替换”元素：
在图像周围放置容器元素，并相对于该容器对齐文本。哪个浏览器显示该文本？我创建了一个fiddle（），但它没有显示“单击图像…”消息。这些伪元素应该被呈现为一个实际元素，作为您正在使用的元素的第一个或最后一个子元素插入
：：before
/
：：after
on–并且
img
元素不能有任何子元素，这就是为什么这不应该起作用（在过去的IIRC中，一些浏览器对此有不同的想法）。如果您使用的是HTML5，请使用它–如果不是，请找到其他容器元素来包装图像。如果您发布了一个fiddle，我相信我们中的一个人会很容易地解决这个问题。@CBroe
：在将
元素添加为指定元素的子元素的同级之后？如果是这样，那么为什么这里的同级选择器不能工作并放大图像@Leete怎么没用？我刚刚用一把编辑过的小提琴更新了我的答案，它使用了
block
，看起来完全一样，少了3行CSS；对于我现有的代码，它不起作用，我一定是遗漏了什么
.main_image {
    border: 1px solid blue;
    padding: 10px 10px 40px 10px;
    display: inline-block;
    position: relative;
}
.main_image img {
    vertical-align: top;
}
.main_image:after { 
    content: "click image to enlarge";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: beige;
    text-align: center;
}