css - Button cropping its contents in Webkit

Question

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

Answer 1

Waitting for answers