カーソルみたいなものって難しいよね

最初に試したこと

最初はdisplay:flex;でanimationしてるカーソルの<span>を横並びにしていた。
するとあら不思議。
wrapしたタイミングでどんどん<span>が縦に伸びていく。
最初のコードはこんな感じ。

<div class="flex">
    <span class="char"></span><span class="cursor"></span>
</div>

cssはこんな感じ。

.flex{
    display:flex;
}
.cursor{
    opacity:1;
    background-color:#000;
    animation:backchange 0.5s infinite;
}
@keyframes backchange{
    0%{
        background-color:#000;
    }
    50%{
        background-color:#fff;
    }
    100%{
        background-color:#000;
    }
}

私(素人)が頑張ってこんなコードを書いたが、縦に伸びていくばかり。
今思えば横並びにしてるので当たり前。

これを皮切りに二時間格闘。
たとえばcharを書き換えるたびに<span>の場所を書き換えたり、果てはJavaScript側でcursorのanimationを無理やり組んだり。
それでも改行したら改行された位置にカーソルが絶対に移動する。
どうしたものか...と困り果てていた時に、あることに気がついた。

使うのは擬似要素や

...というわけで。

結論 擬似要素を使え

.char::after{
    content: '';
    border-right: 2px solid;
    animation: flashing 0.5s linear infinite;
}
body::-webkit-scrollbar {
    display: none;
}
        @keyframes flashing{
    0%{
        border-color: #000;
    }
    50%{
        border-color: #fff;
    }
    100%{
        border-color: #000;
    }
}

HTMLはお察しの通り。

以上っ!