I have a bit of unusual case that requires me to represent typing caret with a singular HTML tag. I am trying to use for this. However, it looks like no matter what CSS I set, the tag is not visible in the UI.

Here is what I’ve tried:

<wbr style="
    display: block;
    width: 10px;
    height: 10px;
    background: #f00;
    visibility: visible;
">

My use case is streaming markdown content that’s being rendered while it is streaming. Visually it is looking something like this:

Implementation wise, it is basically appending <span class="caret"></span> to the end of the markdown.

The problem that I am trying to solve is that if markdown is streaming a codeblock, then my solution will actually render literal <span class="caret"></span> while inside the codeblock, rather than inject the HTML element.

so I am trying to diminish by using a shorter tag. <wbr> was just the shortest tag that’s I could think of that cannot otherwise organically appear in markdown.

the alternatives I considered were using just plain CSS to append the caret visually to the last character in the text… but I couldn’t find a way to do this using CSS.