css overflow-x prevent overflow-y visibility for：：after

y3bcpkx1 于 2023-03-25 发布在其他

关注(0)|答案(1)|浏览(195)

我想通过使用伪元素::after在div的右上角显示一个小十字（“X”）。我所有的div都在一个属性为overflow-x: auto的旋转木马中，但现在十字在经过div的顶部时被裁剪。
我得到的：X is cropped
我想要的：X is visible
我尝试了所有overflow-y的值来使X可见，但没有成功。我需要overflow-x: auto，因为我可以显示很多或很少。
演示代码：

.container {
    overflow-x: auto;
    overflow-y: visible; /* Whatever value is used, it doesn't change anything */
}

.content {
    border: 1px solid #f00;
    position: relative
}
.content::after {
    content: "X";
    border: 1px solid #00f;
    position: absolute;
    top: -10px;
}

<div class="container">
  <div class="content">Lorem ipsum</div>
</div>

css

来源：https://stackoverflow.com/questions/75796251/overflow-x-prevent-overflow-y-visibility-for-after

1条答案

按热度按时间

n53p2ov01#

.container {
  overflow: visible;
}

.content {
  border: 1px solid #f00;
  position: relative;
}

.content::after {
  content: "X";
  border: 1px solid #00f;
  position: absolute;
  top: -10px;
}

<div class="container">
  <div class="content">Lorem ipsum</div>
</div>

试试这个代码，我认为你的问题解决https://ibb.co/zVpS5gb只是改变容器CSS：

.container {
  overflow: visible;
}

赞(0）回复(0）举报 2023-03-25

我来回答

css overflow-x prevent overflow-y visibility for：：after

1条答案

相关问题

热门标签

最新问答