Ну, технически невозможно получить :before
и :after
псевдоэлементы работают на input
элементах
От W3C :
12.1 Псевдоэлементы: before и: after
Авторы задают стиль и расположение создаваемого контента с помощью псевдоэлементов: before и: after. Как указывают их имена, псевдоэлементы: before и: after указывают местоположение содержимого до и после содержимого дерева документа элемента. Свойство content в сочетании с этими псевдоэлементами определяет, что вставляется.
Таким образом, у меня был проект, в котором у меня были кнопки отправки в виде input
тегов, и по какой-то причине другие разработчики запретили мне использовать <button>
теги вместо обычных кнопок ввода ввода, поэтому я предложил другое решение - заключить кнопки в span
набор чтобы position: relative;
затем абсолютное позиционирование значка , используя :after
псевдо.
Примечание. Демонстрационная скрипка использует код содержимого для FontAwesome 3.2.1, поэтому вам может потребоваться изменить значение content
свойства соответствующим образом.
HTML
<span><input type="submit" value="Send" class="btn btn-default" /></span>
CSS
input[type="submit"] {
margin: 10px;
padding-right: 30px;
}
span {
position: relative;
}
span:after {
font-family: FontAwesome;
content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
font-size: 13px;
position: absolute;
right: 20px;
top: 1px;
pointer-events: none;
}
Demo
Теперь здесь все говорит само за себя, об одном свойстве, т. pointer-events: none;
Е. Я использовал это, потому что при наведении курсора на :after
псевдо-сгенерированный контент ваша кнопка не будет щелкать, поэтому использование значения none
заставит действие click пройти этот контент. ,
Из Сети разработчиков Mozilla :
В дополнение к указанию, что элемент не является целью событий мыши, значение none инструктирует событие мыши проходить «через» элемент и нацеливать все, что находится «под» этим элементом.
Наведите курсор на шрифт / значок сердца Demoи посмотрите, что произойдет, если вы не используетеpointer-events: none;