Question

我在网上乱搞了一些按钮，然后是一个按钮，当它悬停在上面时显示一个箭头。

我正在查看此元素的css和html，但看不到它们在任何地方显示的箭头。

该按钮是一个a标签，内部有一个跨度，如下所示：

 <a href="#" id="makeGroupButton">
    <span>Button</span>
 </a>

当用户将鼠标悬停在其上时，某些文字会以某种方式附加到其上，但我无法弄清楚这是怎么回事。

我做了一个JsFiddle来展示：http://jsfiddle.net/aoprjmxr/

css超出了我的范围，任何人都可以帮我看看这个箭头插入的位置吗？

Answer 1

使用:after和:before http://jsfiddle.net/aoprjmxr/1/

#makeGroupButton:hover:before {
  content: 'before';
  display: inline-block;
}

#makeGroupButton:hover:after {
  content: 'after';
  display: inline-block;
}

这样你也可以显示background-image: url(path/to/image)，你也可以设置位置等等

Answer 2

#makeGroupButton span:after 
{
  content: '';  
  position: absolute;
  top: 0;
  right: -14px;
  opacity: 0;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
}

#makeGroupButton:hover span, #makeGroupButton:active span 
{
  padding-right: 30px;
}

#makeGroupButton:hover span:after, #makeGroupButton:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: white;
  right: 0;
  top: 50%;
}

这个CSS正在发挥魔力！

Answer 3

使用#makeGroupButton span:after制作并添加right: -14px;默认情况下，当您将鼠标悬停时，请：right: 0;，然后您可以看到span

Answer 4

即将使用:after中的#makeGroupButton span:after css。

我在你的CSS中做了一些更改，以便在悬停时显示箭头。

#makeGroupButton
{
  letter-spacing: 2px;
  text-align: center;
  color: white;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 300;
  position: absolute; 
  width: 220px;
  background: green;
  overflow: hidden;
  transition: all 0.5s;
  display:table;
}

#makeGroupButton:hover, #makeGroupButton:active 
{
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}

#makeGroupButton span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  transition: padding-right 0.5s;
  display:table-cell;
  vertical-align:middle;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0; 
}

#makeGroupButton span:after 
{
  content: '';  
  position: absolute;
  top: 17px;
  right: -14px;
  opacity: 0;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-135deg);
}

#makeGroupButton:hover span, #makeGroupButton:active span 
{
  padding-right: 30px;
}

#makeGroupButton:hover span:after, #makeGroupButton:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: white;
  right: 10px; 
}

 <a href="#" id="makeGroupButton">
     <span>Button</span>
 </a>

Answer 5

要删除箭头，请检查此课程#makeGroupButton:hover span:after, #makeGroupButton:active span:after并删除opacity中的right:0或css，并删除此课程中的padding {{1} }}

元素中的文本来自何处？

5 个答案: