Вставка генерируемого содержимого :before

[Delat]

a[href*="russian.html"]:before {background: url(bullet2.png) no-repeat; border:1px solid black;}

если убрать из кода псевдоэлемент :before то картинка появится, но мне не хочется добавлять 0 6px padding-left: 15px. чтобы она стала слева перед ссылкой.

Почему маленькая картинка перед ссылкой не отображается?

[klierik]

a:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.25em;

    content: "";

    background: url(bullet2.png); 
    border: 1px solid black;
}

[Delat]

a:before {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 0.25em;

content: "";

background: url(bullet2.png);
border: 1px solid black;
}

не мой, ни ваш пример не работает в IE9, к тому же необходимо вставить картинку только для ссылки с значением

"russian.html"

[Delat]

Вообще зачем мне это надо? Я хочу научиться создавать многоуровневое меню, например как на этом сайте http://www.pexsupply.com/, конкретно для своего подопытного http://prodpak.ru ссылки меню "Продукция". Может быть я не с того начал изучение, кто нибудь может подсказать структурный подход к такому мастерству?

[Catherine]

Средства разработчика + справочники: http://htmlbook.ru/html и http://htmlbook.ru/css (либо любые другие, на ваш вкус).

Конкретно в данном случае по поводу генерируемого контента: http://htmlbook.ru/css/before и http://htmlbook.ru/css/content

не мой, ни ваш пример не работает в IE9

Если что-то не работает, выкладывайте на http://jsfiddle.net

Пример klierik'a работает: http://jsfiddle.net/Cath_kb/GZtwK

[Delat]

a:before {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 0.25em;

content: "";

background: url(bullet2.png);
border: 1px solid black;
}

я несколько модифицировал этот пример и у меня получилось что нужно:

a[href*="russian.html"]:before {
	    display: inline-block;
	    margin-right: 0.25em;
	    content: url("bullet2.png");
	    /*background: url(bullet2.png);*/
	    /*border: 1px solid black;*/
}

[klierik]

не мой, ни ваш пример не работает в IE9, к тому же необходимо вставить картинку только для ссылки с значением

"russian.html"

я допускаю что мог бы допустить какую-то опечатку но это врятли, так как я этот метод использую чуть ли не каждый день.

у меня нет IE9, но опираясь на статью: http://htmlbook.ru/css/before он там точно работать будет.

так что предпологаю проблема только у тебя.

Да и я привел более обобщенный пример без завязки на страницу.

Ну уж коль пошлая такая тема, то такой вариант у меня работает в Chrome (в ИЕ9 работать тоже будет)

a[href^="#"]:before {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 0.25em;

        content: "";

        background: url(bullet2.png); 
        border: 1px solid black;
}

[Delat]

может я что-то не понимаю, но в моей версии IE 9.0.8112.16421 картинка не отображается перед ссылкой. Уже несколько раз перечитал все.

Вот с этим кодом получается то, что нужно и отображается везде кроме IE 9.0.8112.16421:

a[href*="russian.html"]:before {
			 display: inline-block;
			 margin-right: 0.25em;
			 content: url("bullet2.png");
			 /*background: url(bullet2.png);*/
			 /*border: 1px solid black;*/
}

Результат: и это то, что мне нужно.

А вот с этим кодом (также, отображается везде кроме IE 9.0.8112.16421):

a[href^="russian.html"]:before {
			 display: inline-block;
			 width: 16px;
			 height: 16px;
			 margin-right: 0.25em;
			 content: "";
			 background: url(bullet2.png);
			 border: 1px solid black;
}

Результат:

тем не менее, спасибо всем за помощь! А можно как-то проверить этот код онлайн, скажем во всех версиях IE?

[klierik]

Результат как раз такой как и должен быть.

Ты, видимо, не совсем полностью понимаешь что ис себя представляют :before :after, иначе бы уже подправил размеры (16px) под свои нужды.

С другой стороны, если ты нашел решение которое у тебя работает - используй его!

можно во всех через: browsershots.org

или IECollection

[Catherine]

background: url("bullet2.png") no-repeat;

Подробнее по ссылке:

http://htmlbook.ru/css/background

И удалить еще одно лишнее свойство (раз на первой картинке именно то, что нужно). Настоятельно рекомендую понять, что делает КАЖДАЯ строка, читайте http://htmlbook.ru/css

в ИЕ код тестирую при помощи средств разработчика. В большем необходимости в последнее время не испытываю. Подготовка рабочего места к тестированию в разных браузерах: http://habrahabr.ru/post/123019/

[klierik]

Подготовка рабочего места к тестированию в разных браузерах: http://habrahabr.ru/post/123019/

Отличная статья! Как для начинающего разработчика, работающего в среде Windows, будет самое оно.

Хотя я дочитав до

сразу отпадают из-за специфического набора необходимого мне инструментария — под MacOS, например, нет всего необходимого программного обеспечения для работы с Ruby проектами более проблематично поднять все необходимые версии браузеров, а в Linux как известно, нет всеми нами любимого Photoshop, используемого для нарезки макетов.

прокрутил ниже и первый же коментарий уже рассказал то что у меня на уме