要素のテキストはどこから来ますか？

Question

私はいくつかのボタンをオンラインで使いこなしていました。

私はこの要素のCSSとHTMLを見ていますが、どこにでも表示されているこの矢印は見えません。

ボタンは、このような内部のスパンでaタグ、次のとおりです。

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

上にユーザーがいくつかのテキストは、何とかそれに付加されますが、私はそれが起こっているのかを把握することはできません置い

。

私は示すことJsFiddleをした：http://jsfiddle.net/aoprjmxr/

CSSは私の範囲を超えて、誰もがこの矢印が挿入なっている場合、私が見るのを助けることができますか？

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

このCSSは魔法をしています！そうあなたもbackground-image: url(path/to/image)を表示することができますし、また、位置を設定し、その

Answer 2

それで：right: 0;と表示されます。span

Answer 3

に#makeGroupButton span:afterでそれを作った、あなたが置くと、デフォルト、 ではright: -14px;を追加することができますよう:afterと:beforehttp://jsfiddle.net/aoprjmxr/1/

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

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

を使用して

Answer 4

来る: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>

Answer 5

このクラス#makeGroupButton:hover span:after, #makeGroupButton:active span:afterをチェックする矢印を削除し、#makeGroupButton:hover span, #makeGroupButton:active span