UL place listの画像の下にCSS hrefのタイトル

Question

私はthisポラロイドギャラリーCSS効果を使用しています。私はいくつかの変更を加え、メインイメージの下にイメージタイトルとしてhrefからタイトルを追加したいと思います。この時点で私は< li>の右側にこのタイトルを追加することしかできません。私はその下に置いておきたい。これは私がタイトルを取得するために使用していたコードです：

#gallery li a:after { 
    bottom: 0; 
    content: attr(title); 
} 

Seの多くのための私のjsfiddle！

Answer 1

ただ、下記のようなスタイルでdisplay: blockを追加します。

#gallery li a:after { 
    content: attr(title); 
    display: block; 
} 

それは常にデフォルトで新しい行から開始し、ブロックレベル要素とブロックレベル要素のように動作する:after擬似要素を行います。

はFiddleを更新：

Answer 2

#gallery li a:afterにdisplay: blockを追加します。

#gallery li a:after { 
    bottom: 0; 
    content: attr(title); 
    display: block 
} 

Answer 3

をposition: absoluteに要素の位置を設定します。あなたはもちろんの位置であなたが好きなようにプレイすることができます

：

#gallery li a:after { 
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
    content: attr(title); 
} 

結果はその後、次のようになります。

ように、コードの最後のビットは、次のようになります。