Использование: после, чтобы добавить фоновое изображение, но без содержимого

У меня есть кнопка, которая использует графику и имеет закругленные углы.

Чтобы сделать кнопку CSS повторно используемой и вмещать текст любой длины, сохраняя при этом круглые углы, я хотел бы использовать :after добавить конец закругленного угла после основной кнопки (таким образом, первое изображение / текст может увеличиться, и закругленный угол всегда будет прикреплен к концу.)

Удалось получить :after работает, когда я добавляю контент (например, слова "тест" и некоторые цвета фона), но не могу заставить его работать, когда нет стилей в контенте. Мне просто нужно фоновое изображение и все.

JSFiddle с кнопками. Вы можете увидеть :after код, но по какой-то причине это не отображается.

#wizard-nav .paging:after
{ 
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
Источник

2 ответа

Решение

При использовании ::before а также ::after псевдо-селекторы, вам нужно установить значение content,

Псевдоэлементы также являются встроенными элементами, поэтому, если вы хотите определить высоту или ширину, вы должны отобразить их как block элемент.

Например:

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}

Рабочий пример: http://tinkerbin.com/GSO0HpD2

Источник

У вас есть альтернатива для вашего фонового изображения. Вы можете сгенерировать его, например, с помощью http://www.colorzilla.com/gradient-editor/ а затем применить некоторый border-radius, сколько захотите, и border, и вы получите тот же эффект быстрее, чем работая с фоном. -изображение, как это. Например:

border:red 1px solid;
border-radius:10px;

И, кстати, они не появились из-за вашего фонового изображения. Сними свой ". http://jsfiddle.net/WZywh/ вот пример

Источник
Другие вопросы по тегам