Roman52,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a>span {
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div class="hero-intro__nav-text">
<div aria-label="APPLY NOW • RESIDENTS" style="position: relative; height: 4.04204em;">
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-25.7206deg); transform-origin: center 30em;">A</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-24.2048deg); transform-origin: center 30em;">P</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-22.6891deg); transform-origin: center 30em;">P</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.309766em) rotate(-21.3192deg); transform-origin: center 30em;">L</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.365234em) rotate(-19.9856deg); transform-origin: center 30em;">Y</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-18.8905deg); transform-origin: center 30em;"> </span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-17.7043deg); transform-origin: center 30em;">N</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.439063em) rotate(-16.0241deg); transform-origin: center 30em;">O</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">W</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;"> </span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">|</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-12.7194deg); transform-origin: center 30em;"> </span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-9.89556deg); transform-origin: center 30em;">R</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-8.32502deg); transform-origin: center 30em;">E</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-6.80928deg); transform-origin: center 30em;">S</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-5.67787deg); transform-origin: center 30em;">I</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-4.49167deg); transform-origin: center 30em;">D</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-2.92113deg); transform-origin: center 30em;">E</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-1.35059deg); transform-origin: center 30em;">N</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.355469em) rotate(0.164386deg); transform-origin: center 30em;">T</span>
<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(1.62456deg); transform-origin: center 30em;">S</span>
</div>
</div>
<script>
let navDiv = document.querySelector('.hero-intro__nav-text > div');
let navSpans = Array.from(navDiv.querySelectorAll('span'));
let index = navSpans.findIndex(({
textContent
}) => textContent.includes('|'));
let link = document.createElement('a');
link.href = '#';
let linkClone = link.cloneNode();
link.append(...navSpans.slice(0, index - 1))
linkClone.append(...navSpans.slice(index + 1))
navDiv.append(link, navSpans[index], linkClone)
</script>
</body>
</html>