CODEWITHSUNDEEP
htmlcss
cklein23
cklein23

Reputation: 93

Why is bottom: 0 not enough to move ::after content directly below main content?

I'm creating a label that uses an svg as ::after content. I was expecting to move the svg below the main content by using absolute positioning and setting it to bottom: 0, however I'm only able to get the desired positioning if I also set margin-bottom to -17px.

I tried removing the margin-bottom but that forces the svg to move up.

<div class="label-callout">Take Your Pick!</div>

* {padding: 0; margin: 0; box-sizing: border-box;}

.label-callout {
  padding: 3px 8px;
  background-color: #fbfb2f;
  display: inline-block;
  position: relative;
  line-height: 20px; /* why does this break without line height? */
}

.label-callout::after {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/Yellow_Tag_Tail.svg");
  position: absolute;
  bottom: 0;
  left: 37%;
  margin-bottom: -17px;
}

I expect the ::after content to move below the main content without the use of a negative margin-bottom.

Upvotes: 1

Views: 500

Answers (3)

Rinho
Rinho

Reputation: 584

In an absolute position, the bottom property determines the distance between the bottom edge of the element and the bottom edge of its container block.

So everything is working properly. What you need to do is set the bottom value to -17px(bottom: -17px;) in your case to tell the element to position itself below the bottom border of its container. This is specific to this image, because it has transparent edges. A solution with a vertical translate could affect the result if the image is changed in the future for another depending on the size and if it has transparent edges or not. If you know that you are not going to change this image, the Waldir Bolanos option is a good solution.

I recommend using left: 50%; with transform: translateX(-50%). So, no matter the size of the element, you will know that it is centered, however only with the left property, if one day you change the image to a bigger or smaller one, it may not be centered at all.

Upvotes: 2

Albert
Albert

Reputation: 195

Use top: 100%; on ::after instead. If you'd like to leave some gap, use calc: top: calc(100% + 5px);

Upvotes: 2

Waldir Bolanos
Waldir Bolanos

Reputation: 423

Thats because it will bring it to the bottom of the parent, not the outside of it. Why not use a transform instead? https://jsfiddle.net/wwWaldi/wans2ghf/11/

* {padding: 0; margin: 0; box-sizing: border-box;}

.label-callout {
  padding: 3px 8px;
  background-color: #fbfb2f;
  display: inline-block;
  position: relative;
  line-height: 20px; /* why does this break without line height? */
}

.label-callout::after {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/Yellow_Tag_Tail.svg");
  position: absolute;
  left: 37%;
  transform-origin: top;
  transform: translate(0, 100%);
}

Upvotes: 2

Related Questions