CODEWITHSUNDEEP
htmlcssimage
Fjott
Fjott

Reputation: 1137

CSS place href title under image in UL list

I am using this polaroid gallery css effect. I have done some modifications, and would like to add title from the href as the image title under the main image. At this point I am only able to add this title on the right side of the < li>. I would like to have it underneath. This is the code I am using to fetch the title:

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

Se my jsfiddle for more!

Upvotes: 1

Views: 504

Answers (3)

thosetinydreams
thosetinydreams

Reputation: 1000

Set the element's position to position: absolute.

So the final bit of code would look something like this:

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

The result then looks like this: enter image description here

You can of course play with the position any way you want.

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

Just add display: block in styles like below:

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

It will make :after pseudo element to behave like a block level element and block level elements always start from a new line by default.

Updated Fiddle:

Upvotes: 1

CodeRomeos
CodeRomeos

Reputation: 2448

Add display: block in the #gallery li a:after.

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

Upvotes: 1

Related Questions