CSS Pseudo-Elements - 使用：after在圖像下定位文本

我有一個圖像，需要在圖像下方添加文本「點擊放大」，但可以使用CSS來執行此操作。CSS Pseudo-Elements - 使用：after在圖像下定位文本

這是我到目前爲止，但是，我似乎無法正確定位。它似乎漂浮在圖像的右側。我如何才能將它直接放置在圖像的左側？

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

來源

2013-08-03 LeeTee

放一個容器元素的圖像和周圍相對於該容器的文本對齊。 – arkascha

什麼瀏覽器顯示文本？我創建了一個小提琴（http://jsfiddle.net/jhfrench/hs4Pm/），但它不顯示「點擊圖片...」消息。 –

這些僞元素應該被渲染，就好像它們是一個實際元素，插入的元素是您使用':: before' /':: after'的元素的第一個或最後一個_child元素_'，而'img'元素可以沒有任何子元素，所以這就是爲什麼這個不能工作（有些瀏覽器在過去的IIRC中有不同的想法）。如果您使用的是HTML5，請使用['figure' /'figcaption']（http://www.w3.org/TR/html5/grouping-content.html#the-figure-element） - 如果不是，只需找到一些其他容器元素來包裝圖像。 – CBroe

這是一種使用僞元素添加標題的方法。

你HTML可能看起來像：

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

和你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; 
}

僞元素添加到<a>標籤，然後根據需要它的位置。

我用絕對定位，但還有其他選項。

見的演示：http://jsfiddle.net/audetwebdesign/fQyhj/

來源

2013-08-03 14:33:06

您必須添加另一個<div>才能做到這一點。請參閱Fiddle

我已使用margin-top: -80px;將文字放在圖像上。

來源

2013-08-03 13:15:16

我不能添加任何HTML，我只能用CSS操縱它 – LeeTee

只需添加display: block：http://jsfiddle.net/fQyhj/4/

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

我假設你#main-image不是圖像本身，而是它周圍的一些包裝，因爲你看到的文本。

作爲參考，僞元素不會在「替換爲」要素的工作：http://www.red-team-design.com/css-generated-content-replaced-elements

來源

2013-08-03 14:38:03 kalley

試過block，沒有工作。 – LeeTee

@LeeTee它怎麼沒有工作？我剛剛從接受的答案中更新了我的答案，它使用'block'，看起來完全一樣，只有3行CSS。 – kalley

對不起，我昨天沒看到jsfiddle，只是簡單的加了display：block;到我現有的代碼，它不起作用，我一定錯過了一些東西 – LeeTee

CSS Pseudo-Elements - 使用：after在圖像下定位文本

回答

相關問題