html - 为什么 bottom: 0 不足以 move::after content 直接在主要内容下面？

Question

我正在创建一个使用 svg 作为::after 内容的标签。我希望通过使用绝对定位将 svg 移动到主要内容下方并将其设置为 bottom: 0，但是如果我也将 margin-bottom 设置为 -17px，我只能获得所需的定位。

我尝试移除 margin-bottom 但这会迫使 svg 向上移动。

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

我希望::after 内容在不使用负边距底部的情况下移动到主要内容下方。

Answer 1

那是因为它将把它带到父级的底部，而不是它的外部。为什么不使用转换呢？ 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%);
}