我想在链接列表中的每个链接之前添加字体棒极了的图标，然后只通过将图标移动到右侧来动画，当链接悬停时
我只想右箭头（令人敬畏的字体图标'\f105')在链接悬停时平滑地向右移动，并保持文本不移动。在我的代码中，所有的线都是向右移动的，你能不能帮我固定一下线，并且只允许“右箭头”的图标在线悬停的时候向右移动。谢谢
null
.links-block ul>li a:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
content: '\f105';
padding-right: 5px;
transition: all .2s cubic-bezier(.7,0,.3,1);
}
.links-block ul>li a:hover:before{
padding-left: 30px ;
}
.links-list li>a {
text-decoration: none;
}
.link-text:hover {
text-decoration: underline;
}
.links-list {
list-style: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>
<div class="links-block">
<ul class="links-list">
<li> <a href="https://stackoverflow.com/" > <span class="link-text">The portal</span> </a></li>
<li><a href="https://stackoverflow.com/company" > <span class="link-text"> About the company </span></a></li>
</ul>
</div>
</body>
</html>null
共有1个答案
使用translate代替填充。
null
.links-block ul>li a:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
content: '\f105';
padding-right: 5px;
transition: all .2s cubic-bezier(.7, 0, .3, 1);
}
.links-block ul>li a:hover:before {
transform: translateX(10px);
}
.links-list li>a {
text-decoration: none;
}
.link-text:hover {
text-decoration: underline;
}
.links-list {
list-style: none;
}<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<div class="links-block">
<ul class="links-list">
<li>
<a href="https://stackoverflow.com/"> <span class="link-text">The portal</span> </a>
</li>
<li>
<a href="https://stackoverflow.com/company"> <span class="link-text"> About the company </span></a>
</li>
</ul>
</div>-
我想在我的网页中创建一个/菜单，该菜单包含四个链接（水平地位于页面的顶部中心）。 并且我希望当鼠标悬停在上面()时，菜单链接的字体大小增加。 但我遇到的问题是，当字体大小增大时（在和)菜单项会改变它的位置（下了一点），我不希望发生这种情况，请注意，我使用的是背景图像(152*52)作为链接 我尝试使用而不是，但它造成了更大的混乱。 我还试着玩了和，但也不起作用。 我是HTML/CSS的新手，所以任
-
给定单链接列表：
-
问题内容： 我有一个链接图像。当用户将鼠标悬停在链接上时，我想显示不同的图像。 目前，我正在使用以下代码： 但是我遇到了很多问题：div没有选择CSS规则（当我在Firebug中查看元素时，该元素只是没有显示相关的CSS规则）。 也许这是因为（据我所知）这是无效的HTML：您不能在周围加上。但是，如果切换到该位置，似乎会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。 帮帮我！我该如何
-
问题内容： 在PostgreSql中，可以定义一个序列并将其用作表的主键。在HsqlDB中，仍然可以完成创建一个自动递增的标识列，该列不链接到任何用户定义的序列。是否可以将用户定义的序列用作HsqlDB中自动递增标识列的生成器？ PostgreSql中的示例sql： HsqlDB中的等效项是什么？ 谢谢。 问题答案： 在2.0版中，没有直接的功能。您可以在表上定义一个BEFORE INSERT触发
-
我有以下HTML： 这是，它在悬停时导致图像上的覆盖： 以上所有的工作都很好，我很高兴。 问题是，我在标记中还有一个“阅读更多”按钮，当它悬停在上面时，我也想显示覆盖图像。我想我应该使用jQuery来实现这一点。 我有以下脚本： 脚本工作得很好，但当我将按钮悬停并尝试将图像时，覆盖层将不再出现。 所以总结一下： 当使用类悬停在上时，我使用CSS显示一个覆盖层，它起作用了。我使用jQuery在悬停在
-
我正在寻求对组件中的徽章进行动画处理。它有两种可能的状态： 隐藏 显示 当徽章从隐藏转变为显示时，我希望它淡入页面，当徽章由显示转变为隐藏时，我想它淡出。这部分工作得很好-我只需在0和1之间更改不透明度值的状态。 然而，当徽章被隐藏时，它仍然在DOM上，因为它是按钮的一部分，所以在鼠标悬停时看到徽章仍然被占用的所有空白空间看起来很奇怪。理想情况下，当它被隐藏时，我希望它从DOM中消失。 为此，当徽