Woher kommt Text in Element?

Question

Ich war online mit einigen Tasten rum und kam durch einen Knopf, der einen Pfeil zeigt, wenn er überlagert.

Ich schaue durch die css und die html für dieses Element, aber kann diesen Pfeil nicht sehen sie nirgendwo angezeigt werden.

Der Knopf ist ein a Tag mit einer Spannweite innen, wie folgt aus:

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

Wenn ein Benutzer schwebt über es einige Text ihm irgendwie angehängt wird, aber ich kann nicht herausfinden, wie das geschieht.

machte ich eine JsFiddle zu zeigen: http://jsfiddle.net/aoprjmxr/

Die CSS jenseits meiner Reichweite ist, kann mir jemand helfen, zu sehen, wo dieser Pfeil eingefügt wird immer?

Answer 1

#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%; 
} 

Dieses CSS macht die Magie!

Answer 2

mit :after und :beforehttp://jsfiddle.net/aoprjmxr/1/

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

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

wie so auch Sie background-image: url(path/to/image) zeigen können, und Sie können auch Position und so weiter

Answer 3

Machte es mit #makeGroupButton span:after und fügen right: -14px; standardmäßig , wenn Sie schweben es, dann: right: 0; und Sie können die span

Answer 4

sehen Es ist Kommen mit :after css in #makeGroupButton span:after.

Ich habe einige Änderungen in Ihrem CSS vorgenommen, um den Pfeil bei Hover anzuzeigen.

#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

Um den Pfeil überprüfen diese Klasse #makeGroupButton:hover span:after, #makeGroupButton:active span:after zu entfernen und die opacity oder right:0 in css entfernen und auch padding in dieser Klasse css #makeGroupButton:hover span, #makeGroupButton:active span