Я пытаюсь создать кнопку CSS и добавить к ней значок, используя: after, но изображение никогда не появляется. Если я заменил свойство "background" на "background-color: red", появится красное поле, поэтому я не уверен, что здесь не так.
HTML:
<a class="button green"> Click me </a>
CSS
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
Вы можете проверить эту скрипту, чтобы увидеть, что я имею в виду именно.
Спасибо за любые советы.