Проблемный псевдоэлемент :after

[Artsiom]

Доброго времени суток.
Только начал изучать html/css... Посему думаю я на время покину раздел "Новички в программировании" и обоснуюсь тут, хотя может тему стоило делать в "Помощь студентам"?
Вопрос в следующем.
Нужно поставить лейбл после любой позиции в маркированном списке(у меня там где класс kat_leibl).

            <ul>
               <li class="kat_li">Цветы
                  <ul>
                    <li class="kat_leibl">Живые цветы</li>
                    <li>Исскуственные цветы</li>
                  </ul>
               </li>
               <li class="kat_li">Игрушки
                  <ul>
                    <li>Мягкие игрушки</li>
                    <li class="kat_leibl">Конструкторы</li>
                  </ul>
               </li>
               <li class="kat_li">Книги
               	  <ul>
                    <li class="kat_leibl">Аудиокниги</li>
                    <li>Книги в мягком переплете</li>
                  </ul>
               </li>
            </ul>

И так уже пробовал:

PHP код:

li.kat_leibl:after{
    background-image:url(/DZ_lesson2/css/img_css/new_red.ico);
} 


и так, что бы он просто ставил этот лейбл везде на странице после позиции списка

PHP код:

li:after{
    background-image:url(/DZ_lesson2/css/img_css/new_red.ico);
} 


и так(поставил двойные двоеточия)))

PHP код:

li::after{
    background-image:url(/DZ_lesson2/css/img_css/new_red.ico);
} 


Короче ещё были варианты, честно сейчас и не вспомню. Много перебрал.
Работать оно хочет только в таком случае, но заполняет лейблом всё(ну это то понятно, главное что картинка грузиться, всё ок)

PHP код:

li{
    background-image:url(/DZ_lesson2/css/img_css/new_red.ico);
} 


но черт возьми, я не понимаю свою ошибку. Как сделать что бы было по нормальному?

[Streletz]

Сообщение от Artsiom

Короче ещё были варианты, честно сейчас и не вспомню. Много перебрал.

Чем пробовать 100500 вариантов, может лучше 1 раз прочитать?..
Псевдоэлемент :after

[Naive]

Топик-стартеру: если не доперло, то псевдоэлементы не работают без свойства content.
Тем более, ты указываешь фоновую картинку не указывая при этом размеров.
п.с. "правильно" псевдоэлементы писать с удвоенным двоеточием, так они отделяются по логике от псевдоклассов (состояний),
однако принято их писать с одинарным двоеточием благодаря самому лучшему в мире браузеру 8й версии.

[Artsiom]

Блин. В методичке такого не написано. Даже в примерах кода такого нет.
Получается теперь нужно постоянно консультироваться с html.manual.ru или htmlbook.ru
Вот так и скачивай видеоуроки

[Artsiom]

А, не. Не работает.

PHP код:

li.kat_leibl::after{
    content: " ";
    background:url(/DZ_lesson2/css/img_css/new_red.ico) no-repeat;  
    display:inline;
} 


Не выводит картинку(она размера 16х16)

[Artsiom]

И всё равно не работает.
Как бы не перебирал...

[Streletz]

Сообщение от Artsiom

Вот так и скачивай видеоуроки

Качество видеокурсов прямо пропорционально компетентности их автора. Можно встретить и весьма стоящие видеокурсы.
Однако, в силу того, что при современном развитии технологий сделать свой видеокурс может практически любой желающий, интернет, особенно в последнее время, наводнён материалами увы далеко не высокого качества.
Обратитесь к литературе и/или к надёжным интернет источникам.

Сообщение от Artsiom

PHP код:

А, не. Не работает.
[PHP]
li.kat_leibl::after{
    content: " ";
    background:url(/DZ_lesson2/css/img_css/new_red.ico) no-repeat;  
    display:inline;
} 


Не выводит картинку(она размера 16х16) [/PHP]

Посмотрите внимательно на свой код и перечитайте посты выше включая статью на htmlbook.ru по ссылке.

[Artsiom]

Сообщение от Streletz

Посмотрите внимательно на свой код и перечитайте посты выше включая статью на htmlbook.ru по ссылке.

Всё, я сдаюсь. Дальше нужно идти, а я всё никак не могу побороть after, так скоро и лето кончиться.

Хелп. Не могу понять. Смотрю я на код, смотрю сайт. Опять код, опять сайт(кстати он сломался чего-то, наверно протёр взглядом).
Ну нет ошибки. Всё должно работать, но не работает.

[Streletz]

Сообщение от Artsiom

Ну нет ошибки. Всё должно работать, но не работает.

Есть. Поэтому и не работает.
Вам уже сказали в чём 1 из проблем. В коде псевдоэлемента не указаны размеры картинки. Значения для width и height браузер, к сожалению, сам не придумает.
Есть ещё 2я проблема. Помимо размера также следует указать position.
Для наглядности в помощь пример со stackoverflow:
CSS background image in :after element
Браузер отображает только то, что есть в разметке и CSS. То что в них есть, то Вы и видите. Если не прописано всё что нужно для отображения after, то вполне естественно, что браузер его не показывает.
Не по теме.
Рано сдаваться. Ещё даже зима не началась.

[Artsiom]

Сообщение от Streletz

Значения для width и height браузер, к сожалению, сам не придумает.

Я думал придумает. У меня картинка 16х16, чего думать, вставил как есть и так сойдёт

Сообщение от Streletz

Есть ещё 2я проблема. Помимо размера также следует указать position

Хм, спасибо. Сегодня попробую.