Оформление списков с помощью псевдоэлементов

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

1-й способ

[codesyntax lang=»html4strict» title=»HTML»]

<ul id="ul1">
    <li><span>Первый элемент списка</span></li>
    <li><span>Второй элемент списка, но очень длинный</span></li>
    <li><span>Третий элемент списка</span></li>
</ul>

[/codesyntax]

[codesyntax lang=»css» title=»CSS»]

#ul1 {
	list-style: square;
        color: #0000ff;
        width: 200px;
}
#ul1 span {
        color: #666;
}

[/codesyntax]

Получим:

Минусы:

  1. Квадрат расположен не по центру, а сверху
  2. Лишний тег <span>
  3. Мы не можем кроссбраузерно задать положение и размер квадрата

2-й способ

Мы отказываемся от свойства list-style и задаем фон каждому элементу списка

[codesyntax lang=»html4strict» title=»HTML»]

<ul id="ul2">
    <li>Первый элемент списка</li>
    <li>Второй элемент списка, но очень длинный</li>
    <li>Третий элемент списка</li>
</ul>

[/codesyntax]

[codesyntax lang=»css» title=»CSS»]

#ul2 {
    list-style:none;
    color: #666;
    width: 200px;
    padding: 0 0 0 20px;
    margin: 0;
}
#ul2 li {
    padding-left: 15px;
    background: url('sq.gif') no-repeat 0 50%;
}

[/codesyntax]

Получим:

Этот вариант не обладает недостатками предыдущего, но мы подключаем в стиле еще маленькую картинку, которая хоть и весит 45 B, в результате лишнего обращения к серверу дает около 1kB трафика. Это можно обойти, используя data:URL. Тогда оформление нашего фона будет выглядеть так:

[codesyntax lang=»css» title=»CSS»]

background: url('data:image/gif;base64,R0lGODlhBQAFAIAAAAoD8QAAACH5BAAAAAAALAAAAAAFAAUAAAIEhI+pWAA7') no-repeat 0 50%;

[/codesyntax]

Но, на мой взгляд, самым универсальным способом является использование псевдоэлементов (если конечно вам не надо поддерживать «старых ослов»):

[codesyntax lang=»html4strict» title=»HTML»]

<ul id="ul3">
    <li>Первый элемент списка</li>
    <li>Второй элемент списка, но очень длинный</li>
    <li>Третий элемент списка</li>
</ul>

[/codesyntax]

[codesyntax lang=»css» title=»CSS»]

#ul3 {
    list-style:none;
    color: #666;
    width: 200px;
    padding: 0 0 20px 35px;
    margin: 0;
}
#ul3 li{
    position: relative;
}
#ul3 li:before {
    width:5px;
    height: 5px;
    position: absolute;
    top:50%;
    left:-15px;
    background: #0000ff;
    display:block;
    margin-top: -2px;
    content:"";
}

[/codesyntax]

Эта конструкция работает во всех современных браузерах. И главным ее плюсом является очень гибкая настройка. Её лучше использовать для менее тривиальных задач. Например если требуется, чтобы метка для списка была за пределами li и др.

 

Запись опубликована в рубрике HTML/CSS с метками , , , , , , . Добавьте в закладки постоянную ссылку.

Один комментарий: Оформление списков с помощью псевдоэлементов

  1. можно еще этот буллет засунуть в спрайт с другими мелкими элементами. правда это самый долгий в реализации и самый неудобный в поддержке вариант. зато кроссбраузерный )

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *