CSS animated underline in position absolute issue

Question

I have an issue with an animated underline effect I got from HERE. When I apply i to the code for elements inside and absolute div, the underline applies to the entire div, not the a tag itself.

Here's the html of the portion:

<div class="navbar">
            <div class="elem">
                <p><a href="#" class="tt">Element</a></p>
                <p><a href="#" class="m">Element</a></p>
                <p><a href="#" class="m">Element</a></p>
                <p><a href="#" class="m">Element</a></p>

            </div>
        </div>

Minimal codepen: HERE

Any help would be gladly appreciated

Answer 1

You forgot to position the anchor link since it is the 'parent' to the pseudo-element.

Codepen Demo

.navbar a {
    color: white;
    text-decoration: none;
    width: auto;
    position: relative; /* here */
}

Answer 2

Just add position:relative to the paragraph element

.navbar p {
    font-size: 30px;
    display: table-cell;
    text-align: center;
    position: relative;
}

https://codepen.io/anon/pen/KVbbQe?editors=1100