Где текст в элементе?

Question

Я возился с некоторыми кнопками в Интернете и нажимал кнопку, которая отображает стрелу, когда она витала.

Я просматриваю css и html для этого элемента, но не вижу эту стрелку, которую они отображают в любом месте.

Кнопка является a тег с пролетом внутри, как это:

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

Когда пользователь парит над ним какой-нибудь текст добавляемый к нему как-то, но я не могу понять, как это происходит.

Я сделал JsFiddle, чтобы показать: http://jsfiddle.net/aoprjmxr/

устанавливаемого сотовый находится вне моей компетенции, может кто-нибудь помочь мне увидеть, где эта стрелка становится вставлена?

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 делает магию!

Answer 2

использованием :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) и вы также можете установить позицию и так далее

Answer 3

Сделано это с #makeGroupButton span:after и добавить right: -14px; По умолчанию при наведении это, а затем: right: 0; и вы можете увидеть span

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 и удалить opacity или right:0 в css, а также удалить padding в этом классе CSS #makeGroupButton:hover span, #makeGroupButton:active span