元素来自哪里？

我在网上搞了一些按钮，上面有一个按钮，它在悬停时显示一个箭头。元素来自哪里？

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

的按钮是内部的a标签，跨度，就像这样：

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

当用户将鼠标悬停在它的一些文字被追加到它在某种程度上，但我无法弄清楚如何发生的事情。

我做了一个的jsfiddle显示：http://jsfiddle.net/aoprjmxr/

的CSS我是外行，任何人可以帮助我看到这个箭头被越来越插入？

来源

2016-08-20 MarksCode

#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在做魔术！

来源

2016-08-20 06:46:19 Smit

使用:after和:beforehttp://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)，你还可以设置位置等

来源

2016-08-20 06:47:05 caramba

@MarksCode这是否回答你的问题，或者你仍然在寻找正确的答案？同样在Chrome浏览器中，您可以调试并标记所有元素的“悬停”，然后您还可以找到'：after'和'：before'元素 – caramba

与#makeGroupButton span:after制成，并添加right: -14px;默认情况下，当你将鼠标悬停那么：right: 0;，你可以看到span

来源

2016-08-20 06:49:20

它是使用:after css在#makeGroupButton span:after。

我已经做了一些改变，你的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>

来源

2016-08-20 06:51:56

要删除的箭头来查看这个类#makeGroupButton:hover span:after, #makeGroupButton:active span:after并删除opacity或right:0在css并在这个类的CSS删除padding#makeGroupButton:hover span, #makeGroupButton:active span

来源

2016-08-20 06:54:28 Joyson

元素来自哪里？

回答

相关问题