JSFiddle - React, Tailwind, and code Playground

HTML

<p>Hover the following word to highlight accents</p>

<div>p<span class="phantom">^</span>ant<span class="phantom">`</span>era</div>

CSS

div {
    font-size: 24pt;
    padding: 16px;
    margin: 16px;
}

.phantom {
    display: inline-block;
    width: 0;
    overflow: visible;
    transition: color 1s;
}

div:hover > .phantom {
    color: red;
    transition: color 1s;
}