純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>