I would like to make a <button>
whose contents extend beyond its border box.
This MWE works as intended in all browsers I have access to, except Epiphany (Webkit):
button {
margin: 0;
padding: 0;
outline: none;
appearance: none;
-webkit-appearance: none;
font: inherit;
border: 1px dashed black;
background: inherit;
overflow: visible;
}
button::after {
content: 'abc';
margin-right: -1em;
}
(JSBin)
Firefox:
Chrome:
Samsung Internet:
MS Edge:
Hell, it even almost works in IE11 (even though it has no concept of appearance
):
Only Epiphany (so presumably also Safari) displays this:
Is there anything I could do? I went through the displayed user agent stylesheet and no property seems to imply it should render cropped.
question from:
https://stackoverflow.com/questions/65906758/button-cropping-its-contents-in-webkit 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…