Question

我遇到了来自HERE的动画下划线效果问题。当我将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>

最小代码：HERE

欢迎任何帮助

Answer 1

你忘了定位锚链接，因为它是伪元素的'父'。

Codepen Demo

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

Answer 2

只需将position:relative添加到段落元素

即可

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

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

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

2 个答案: