Настроить маркеры элементов списка с помощью CSS

Вы можете обернуть содержимое li в другой элемент, такой как span. Затем задайте li большее font-size и установите нормальное значение font-size на span:

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

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

list-style-image:url('bigger.gif');
list-style-type:none;

Если вы имели в виду фактический размер элемента li, то вы можете изменить его как обычно с помощью width и height.

Основано на ответе @dzimney и аналогично ответу @Crisman (но отличается):

Этот ответ хорош, но имеет проблему с отступом (появляются маркеры ] внутри li объема ). Вероятно, вы не хотите этого. См. Простой список примеров ниже (это список HTML по умолчанию):

• Lorem ipsum dolor sit amet, ei cum offndit partiendo iudicabit. В mei quaestio honestatis, duo dicit affertti преследования. Etiam nusquam cu его, nec alterum posidonium philophia te. Nec a purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, falli inermis compitesamest in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

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

• Lorem ipsum dolor sit amet, ei cum offndit partiendo iudicabit. В mei quaestio honestatis, duo dicit affertti преследования. Etiam nusquam cu его, nec alterum posidonium philophia te. Nec a purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, falli inermis compitesamest in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

Поэтому я рекомендую этот подход, который решает проблему:

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

В зависимости от необходимого уровня поддержки IE вы также можете использовать селектор: before со стилем маркера, установленным в качестве свойства содержимого.

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

Возможно, вам придется поискать HTML ASCII для нужного стиля маркера и использовать конвертер для значения шестнадцатеричного CSS.

Другим способом изменения размера маркеров будет:

1. Отключение маркеров в целом
2. Повторное добавление пользовательских маркеров с помощью псевдоэлемента ::before .

Пример:

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

Не требуется никаких изменений разметки

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>

Если вы поместите содержимое <li> в тег <span> или другой тег, вы можете изменить размер шрифта <li>, который изменит размер маркера, а затем сбросить содержимое <li>. к своему первоначальному размеру. Вы можете использовать em единиц для пропорционального изменения размера пули <li>.

Например:

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Тогда CSS:

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

Более сложный пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

Результатов:

Если вы не хотите обернуть содержимое в <li> в <span>, вы также можете использовать :before следующим образом:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Отрегулируйте размеры шрифта на :before к тому, что вы хотели бы.

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

Вы должны использовать изображение, чтобы изменить фактический размер или форму самой пули:

Вы можете использовать фоновое изображение с соответствующими отступами, чтобы подтолкнуть контент, чтобы он не перекрывался:

list-style-image:url(bigger.gif);

или

background-image: url(images/bullet.gif);