JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">Left side: <span class="content">X</span></div>

<div class="bottomRight">Bottom right corner: <span class="content">X</span></div>

CSS

body {
    padding: 20px;
}
.content {
    position: relative;
    font-size: 50px;
}

.content:after {
    position: absolute;
    overflow: hidden;
    content: "X";
    color: red;
}
.left .content:after {
    top: 0;
    left: 0;
    width: .36em;
}

.bottomRight .content:after {
    left: .36em;
    width: .36em;
    text-indent: -.36em;
    top: .55em;
    height: .6em;
    line-height: .11em;
}