css: после не будет работать

Question

У меня есть css реквизит, как указано

#menu li#selected { padding: 0 10px; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px; }

после того, как мне нужно отобразить вторую часть изображения nav-tab-right.gif

я пытаюсь

#menu li#selected:after { background:url(nav-tab-right.gif) bottom right no-repeat; }

но это возвращает неубедительно

Answer 1

Без свойства «content» в CSS: after ничего не сделает. Он выбирает псевдоэлемент, представляющий последний дочерний элемент элемента, к которому он был применен (своего рода виртуальный элемент, являющийся дочерним элементом для li # selected, в вашем случае).

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

#menu li#selected:after
{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red; 
}

Это должно дать представление о том, что достижимо.

Answer 2

Построение из вашего предыдущего вопроса * HTML-код 1002 *.

IE7 и ниже не поддерживает псевдоэлемент :after. Вместо этого используйте что-то вроде этого:

HTML:

<li id="selected"><a href="http://www.">FAQ'S</a></li>

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

Это будет работать во всех браузерах и не зависит от :after, который IE7 и ниже не поддерживает.

---

Вариация при наведении курсора

Еще одним преимуществом использования этого метода является то, что вы можете немного изменить его, чтобы разрешить использование CSS-изображений, которые будут совместимы с IE6 как таковые:

HTML:

<li id="selected"><a href="http://www."><span>FAQ'S<span></a></li>

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

Да, он работает в IE6 и ниже (и выше), поскольку a - единственный элемент, для которого IE6 поддерживает псевдокласс :hover. Это также причина, по которой этот метод требует добавления дополнительного тега <span>, поскольку мы не можем нацелить <li> с помощью :hover так, как это понимает IE6.

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

Для получения дополнительной информации о поддержке селекторов CSS см. CSS - Содержание и совместимость .