Html CSS动画下划线处于绝对位置问题

我有一个问题，我从动画下划线效果。 当我将I应用于内部元素和绝对div的代码时，下划线应用于整个div，而不是a标记本身

以下是该部分的html：

<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>

最小代码笔：

---

如果您忘记定位锚定链接，将不胜感激，因为它是伪元素的“父级”

---

只需在段落元素中添加

位置：relative

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

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