CSS по шагам



Пример 17.2. Использование псевдоэлемента before


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type=$amp;quot;text/css">

UL {

 padding-left: 0px; /* Убираем отступ слева */

 list-style-type: none /* Прячем маркеры списка */

}

LI:before {

 content: "\20aa " /* Добавляем перед элементом списка символ в юникоде */

}

</style>

</head>

<body>

<ul>

 <li>Чебурашка</li>

 <li>Крокодил Гена</li>

 <li>Шапокляк</li>

 <li>Крыса Лариса</li>

</ul>

</body>

</html>

Результат примера показан ниже.

DIV.result UL {padding-left: 0px;list-style-type: none; margin: 0px} DIV.result LI:before { content: "\20aa "}

  • Чебурашка
  • Крокодил Гена
  • Шапокляк
  • Крыса Лариса
  • В данном примере псевдокласс before устанавливается для селектора LI определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.




    Содержание  Назад  Вперед