JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#oneUrl">One Link</a></li>
        <li><a href="#twoUrl">Two Link</a></li>
        <li><a href="#threeUrl">Three Link</a></li>
    </ul>
</nav>
<aside>Some aside in which the link may be separate from the text. <a href="#oneUrl"></a></aside>
<p>Some relevant text with a <a href="#oneUrl"></a> link. You probably don't really want to leave these blank, as the link will probably <a href="#twoUrl"></a> be part of the text.</p>

CSS

nav li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
}

aside {
    float: left;
    width: 70px;
    margin: 10px;
    border: 1px solid blue;
}
aside a[href='#oneUrl']:before {
    content: 'One Link';
    display: block;
    margin: 10px 0;
}

p a[href='#oneUrl']:before {
    content: 'inline';
}

p a[href='#twoUrl']:before {
    content: 'want to';
}