Изображение в CSS: после элемента

Я пытаюсь создать кнопку 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;
}

Вы можете проверить эту скрипту, чтобы увидеть, что я имею в виду именно.

Спасибо за любые советы.

Ответы

Ответ 1

Пара вещей

(a) вы не можете иметь фоновый цвет и фон, фон всегда будет выигрывать. в приведенном ниже примере я объединил их через стенографию, но это приведет к цвету только в качестве резервного метода, когда изображение не будет отображаться.

(b) no-scroll не работает, я не верю, что это действительное свойство фонового изображения. попробуйте что-то вроде исправленного:

.button:after {
    content: "";
    width: 30px;
    height: 30px;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

Я обновил ваш jsFiddle и показал изображение.

Ответ 2

Как сказал AlienWebGuy, вы можете использовать фоновое изображение. Я предлагаю вам использовать фон, но после URL потребуется еще три свойства:

background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;

Объяснение: два нуля представляют собой x и y позиционирование для изображения; если вы хотите настроить, где отображается фоновое изображение, поиграйте с ними (вы можете использовать как положительные, так и отрицательные значения, например: 1px или -1px).

No-repeat говорит, что вы не хотите, чтобы изображение повторялось по всему фону. Это также может быть repeat-x и repeat-y.