CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

ILYAS KERBAL
ILYAS KERBAL
Front End Web Development Techdegree Graduate 15,209 Points

A better solution for adding the location icon

Instead of putting two images inside the figure tag:

figure::after {
  content: url(../img/location.svg);
  position: absolute;
  right: -1em;
  top: -1em;
  width: 2em;
  height: 2em;
}

2 Answers

Steven Parker
Steven Parker
203,728 Points

Be aware that doing this will add a location icon to every figure element on the page. That's great if it's what you really want but I don't think that was the intention in this video.

ILYAS KERBAL
ILYAS KERBAL
Front End Web Development Techdegree Graduate 15,209 Points

Yes, you can specify the figure you want by using a class or ID. My point is not using two images inside a single figure tag.

Steven Parker
Steven Parker
203,728 Points

OK, but I'm still a little confused about what makes this approach "better". So overlooking the selector issue, could you explain why having two images in a figure is a disadvantage, and/or how having one added as a pseudo-element instead of in the HTML is an advantage?