Question

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

我尝试移除边缘底部，但这迫使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%);
}

Answer 2

在绝对位置，bottom属性确定元素的底部边缘与其容器块的底部边缘之间的距离。

所以一切正常。您需要做的是将底值设置为-17px（bottom: -17px;），以告知元素将其自身定位在其容器的底部边框之下。这是特定于此图像的，因为它具有透明边缘。如果将来根据图像大小更改图像，并且图像是否具有透明边缘，则采用垂直平移的解决方案可能会影响结果。如果您知道不打算更改此图像，那么Waldir Bolanos选项是一个很好的解决方案。

我建议将left: 50%;与transform: translateX(-50%)一起使用。因此，无论元素的大小如何，您都将知道它是居中的，但是只有通过left属性，如果有一天将图像更改为更大或更小，则可能根本不会居中

Answer 3

在top: 100%;上使用::after。如果您想保留一些空白，请使用calc：top: calc(100% + 5px);

为什么底部：0不足以将:: after内容直接移动到主要内容下方？

3 个答案: