<!DOCTYPE html>
<html>
<head>
<title>Zero-width layers</title>
<style>

.foo {
    margin: 100px;
}

.button {
    display: block;
    font-size: 14px;
    height: 46px;
    position: absolute;
    left: 105px;
    text-align: center;
    text-transform: lowercase;
    top: 27px;
    transform: none;
    visibility: visible;
    width: 100px;
    z-index: 10021;
}

.button::before {
    color: rgb(0, 0, 0);
    display: block;
    font-size: 40px;
    height: 46px;
    width: 0px;
    z-index: auto;
    content: 'A'
}

.container {
    width: 100%;
    height: 100%;
}

</style>
</head>
<body>
    <aside class="container">
        <span class="button"></span> 
        <div class="foo"></div>
    </aside>
    <p>
        A lowercase a should appear above.
    </p>
</body>
</html>