使用Elementor CSS实现悬停下划线效果
使用Elementor CSS实现悬停下划线效果
提问于 2021-08-05 14:04:32
在这个问题上，我一直在碰壁。我已经尝试使用这行代码在使用Elementor的CSS中创建悬停效果的下划线。我已经用一个按钮小部件和一个文本编辑器小部件试过了，但似乎根本不能让它工作。我遗漏了什么？任何帮助都是非常有帮助的。
谢谢
:
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}回答 1
Stack Overflow用户
发布于 2021-08-05 16:13:00
你的代码几乎可以工作了--问题出在转换属性上。你有左，右，这是不合法的CSS。实际上，你只想转换右边的属性，下划线保持在左边。
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover::after,
.underline:focus:after,
.underline:active:after {
right: 0;
}<div class="underline">Hover over me</div>
通过relvant验证器运行您的代码会很有帮助。在本例中，我使用了W3C CSS验证器，它会发现错误。
尽管您可以像您所做的那样转换(动画)正确的属性，但使用缩放或平移等变换来收缩/增长或移动对象通常更有性能(从CPU/GPU使用的意义上讲)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68668126
复制相关文章
相似问题
腾讯云开发者
