如何使一个闪烁的“光标/矩形”在CSS中的“正常”文本？

<style>
    .cursor {
        position: relative;
        display: inline-block;
    }

    .cursor::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 1em;
        background-color: #000;
        animation: blink 1s infinite;
    }

    @keyframes blink {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>

<div class="cursor">正常文本</div>