Css “创建”按钮，右侧显示悬停箭头

我想创建一个按钮，它将在悬停时显示一个箭头，但我希望该箭头从右侧进入并在按钮内向右浮动，而不管按钮的大小

以下是我迄今为止所取得的成就

。按钮{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#BEC4C9；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 22.9071px 5.6px 14px；
文本对齐：左对齐；
垂直对齐：基线；
宽度：自动；
}
.按钮跨度{
光标：指针；位置：相对；转换：0.5s；
}
.按钮跨度：之后{
内容:'\►'; 位置：绝对；不透明度：0；顶部：0；右侧：0；
}
.按钮：悬停范围{
右填充：23px；颜色：#ffffff；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}
.钮扣{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#ffffff；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 5px 5.6px 14px；
文本对齐：左对齐；
过渡：均为0.5s；
垂直对齐：基线；
宽度：200px；
}

悬停1
悬停2
我想它看起来像下面的东西后，徘徊
盘旋►

您只需将

跨度

的宽度与其父项相同即可。 您可以使用span上的

display:block

另外，据我所知，

按钮内不允许有
span

因此，您可以尝试在
按钮上使用
：before
，或者将按钮更改为div。然后您可以直接在
div上使用
：before
，或者像现在一样在span上使用它

只要把你的箭放在你想要的位置。（使用左右平移等）

注意：请勿在布局中使用
float
。并请使用
css
“美化器”来组织您的代码


。按钮{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#BEC4C9；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 22.9071px 5.6px 14px；
文本对齐：左对齐；
过渡：均为0.5s；
垂直对齐：基线；
宽度：自动；
}
.按钮跨度{
光标：指针；位置：相对；转换：0.5s；
宽度：100%；显示：块；
}
.按钮跨度：之后{
内容:'\►'; 位置：绝对；不透明度：0；顶部：0；左侧：0；过渡：0.5s；
}
.按钮：悬停范围{
右填充：23px；颜色：#ffffff；
}
.按钮：悬停范围：之后{
不透明度：1；
左：计算（100%-23px）；
}
.钮扣{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#ffffff；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 5px 5.6px 14px；
文本对齐：左对齐；
过渡：均为0.5s；
垂直对齐：基线；
宽度：200px；
}
悬停1
悬停2
我想它看起来像下面的东西后，徘徊
盘旋►
您只需将
跨度
的宽度与其父项相同即可。
您可以使用span上的
display:block

另外，据我所知，
按钮内不允许有
span

因此，您可以尝试在
按钮上使用
：before
，或者将按钮更改为div。然后您可以直接在
div上使用
：before
，或者像现在一样在span上使用它

只要把你的箭放在你想要的位置。（使用左右平移等）

注意：请勿在布局中使用
float
。并请使用
css
“美化器”来组织您的代码


。按钮{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#BEC4C9；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 22.9071px 5.6px 14px；
文本对齐：左对齐；
过渡：均为0.5s；
垂直对齐：基线；
宽度：自动；
}
.按钮跨度{
光标：指针；位置：相对；转换：0.5s；
宽度：100%；显示：块；
}
.按钮跨度：之后{
内容:'\►'; 位置：绝对；不透明度：0；顶部：0；左侧：0；过渡：0.5s；
}
.按钮：悬停范围{
右填充：23px；颜色：#ffffff；
}
.按钮：悬停范围：之后{
不透明度：1；
左：计算（100%-23px）；
}
.钮扣{
背景色：rgb（37,37,37）；
背景图像：无；
边界半径：4px；
边界：无；
颜色：#ffffff；
光标：指针；
显示：块；
填充：无；
字体系列：Arial；
字体大小：14px；
字体大小：粗体；
高度：自动；
线高：18.2px；
利润率：5px1.4px20px0；
溢出：隐藏；
填充：5.6px 5px 5.6px 14px；
文本对齐：左对齐；
过渡：均为0.5s；
垂直对齐：基线；
宽度：200px；
}
悬停1
悬停2
我想它看起来像下面的东西后，徘徊
盘旋►
我喜欢在这样的动画中使用伪元素。我在按钮中添加了
position:relative
，并且：after元素是
position:absolute
。我将：after元素设置为右侧，默认情况下是透明的。当按钮悬停时：after元素移动到指示的位置并淡入

该方法需要的代码要少得多