以下代码不遵守溢出:隐藏边界,这导致我的代码困惑,其中有许多连续行。
您可以看到(下面的 jsfiddle)它确实尊重文本(“测试”),但不尊重::after 元素中定义的内容。
我该如何解决/解决这个问题?
更新:通过移除 position:absolute 在::after 元素中然后边界得到尊重是有意义的,但是“图标”不再可见
html
<div class="wrap">
<div><a href="/" class="btn icon">Test</a></div>
<div><a href="/" class="btn icon">Test</a></div>
<div><a href="/" class="btn icon">Test</a></div>
</div>
CSS
body { padding: 50px 0; }
.wrap {
background: grey;
height:18px;
overflow:hidden;
}
.btn {
border: 1px solid #999;
border-radius: 8px;
}
.icon {}
.icon::after {
content:"";
position:absolute;
margin-left:6px;
margin-top:1px;
width:4px;
height:6px;
background:#fff;
border:1px solid #444;
opacity:0.8;
}
最佳答案
关于HTML CSS,::添加后不考虑父级的溢出:隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39142791/