纯CSS实现字体上下部分颜色不同的效果

先上实现效果：

代码如下：
==================style==================

		span {
            font-size: 150px;
            font-weight: 900;
            font-family: 'Courier New', Courier, monospace;
        }

        .left {
            margin-top: 20vh;
            position: absolute;
        }

        span::before {
            position: absolute;
            height: 50%;
            content: attr(content);
            overflow: hidden;
            color: sandybrown;
            z-index: 999;
        }

==================html==================

	<div>
        <div class="left">
            <span content="布">布</span>
            <span content="尔">尔</span>
        </div>
    </div>