Увеличить размер типа списка-пуля

Есть ли способ увеличить размер шрифта только типа пули с помощью CSS? Я не хочу увеличивать размер текста пули, просто тип пули. Я не могу использовать изображения или JavaScript. Это должно быть то, что я могу встроить внутри тегов <style> в тег <head>.

Ответ 1

Возможно, не работает в старой версии IE.

li:before{ content:'\00b7'; font-size:100px; }

Демо

Для IE6:

Без javascript или изображений я бы порекомендовал разместить <span>·</span> в начале каждого элемента списка и стилировать это.

Ответ 2

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

<li><span>Item 1</span></li>
<li><span>Item 1</span></li>

Затем вы можете увеличить размер шрифта li и уменьшить размер шрифта вашего диапазона:

li {
  font-size: 20px;
}
li span {
  font-size: 14px;
}

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

Ответ 3

Когда вы говорите, что не можете использовать изображения, вы имеете в виду, что вы не можете редактировать теги li для добавления изображений или что вы не можете использовать изображение вообще?

В элементах li вы можете установить свойство list-style-image.

li {
 list-style-image: url('/imagepath.png');
}

Это может продолжаться в вашем теге заголовка без изменения разметки списка.

Ответ 4

о котором я не знаю.

но вы можете подделать его, используя: before

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}

Ответ 5

поместите любой цвет фона для тега (ex:.menu li a) и добавьте дополнение для него, которое вы получите как поле, а затем border-radius, а затем для (.menu li) примените прописку слева и справа для интервала... (объяснено в обратном порядке)

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}

Ответ 6

Ища решение для этого тоже, и обнаружил, что если вы вложите p внутри li, вы можете пометить пули и текст пули отдельно.

<div>
  <ul>
    <li><p>Hello</p></li>
  </ul>
</div

div ul li {
 /*this will style the bullets*/
}

div ul li p {
/*this will style the text*/
}