Question

我正在尝试重新创建在不使用引导程序的情况下在引导程序博客中看到的设计，该设计涉及使用"选择器将::after作为内容。尽管它在我的页面上看起来不错，并且所有内容都放置正确，但是内容太大，以至于其下方的元素被挡住了，这很麻烦，因为这些元素有时是按钮。

当我在IE：https://imgur.com/eBYMix2中突出显示字符时，您可以轻松地看到问题。

我认为它占用了很大的垂直空间，因为字体大小很大（200像素）。有没有办法来解决这个问题？我了解我可以使用背景图片代替我的::after内容，但如果可能的话，宁愿避免使用这种方法。

div::after {
  content: "”";
  height: 0;
  overflow: visible;
  position: absolute;
  bottom: -8px;
  right: 17px;
  font-family: Georgia, serif;
  font-size: 200px;
  line-height: 0;
  font-weight: normal;
}

<div></div>

Answer 1

您必须为position: relative;元素设置div才能正确放置:after：

div {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: yellow;
  overflow: hidden;
}

div::after {
  content: "”";
  height: 0;
  overflow: visible;
  position: absolute;
  bottom: -8px;
  right: 17px;
  font-family: Georgia, serif;
  font-size: 200px;
  line-height: 0;
  font-weight: normal;
  background-color: red;
}

<div></div>
<p>Test</p>

编辑：在div上添加overflow: hidden;固定底部空间。

为什么:: after内容会占用这么多垂直空间？

1 个答案: