是否可以更改 <li> 元素的 bullet 的大小？
看看下面的代码：
li {
list-style: square; // I want to change the size of this squared bullet.
}
我似乎找不到任何方法来实现这一点。
【问题讨论】：
li元素的文本内容吗？
标签： css size html-lists listitem
你的意思是改变子弹的大小，我猜？我相信这与 li 标签的字体大小有关。因此，您可以放大 LI 的字体大小，然后针对其中包含的元素减小它。添加额外的标记有点糟糕 - 但类似于：
li {font-size:omgHuge;}
li span {font-size:mehNormal;}
或者，您可以为列表项目符号指定一个图像文件，该文件可以任意大：
ul{
list-style: square url("38specialPlusP.gif");
}
【讨论】：
基于@dzimney answer，类似于@Crisman answer（但不同）
这个答案很好，但有缩进问题（子弹出现在li范围内）。可能你不想要这个。请参阅下面的简单示例列表（这是默认的 HTML 列表）：
Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit。在 mei quaestioHonestatis，duo dicit affert persecuti ei。 Etiam nusquam cu his, nec alterum posidonium philosophia te。 Nec an purto iudicabit, no vix quod clita expetendis。
Quem suscipiantur no eos, sed impedit 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。
但如果您使用上述答案，列表将如下所示（忽略项目符号的大小）：
• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit。在 mei quaestioHonestatis，duo dicit affert persecuti ei。 Etiam nusquam cu his, nec alterum posidonium philosophia te。 Nec an purto iudicabit, no vix quod clita expetendis。
• Quem suscipiantur no eos, sed impedit 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 {
list-style-type: none;
position: relative; /* It's needed for setting position to absolute in the next rule. */
}
li::before {
content: '■';
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>【讨论】：
font-family 以确保正确渲染子弹。例如，某些字体将圆形项目符号呈现为正方形。
您可以将li 的内容包装在另一个元素中，例如span。然后，给li 一个更大的font-size，并在span 上设置一个普通的font-size：
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 进行更改。
【讨论】：
您可以使用 ::marker CSS 伪元素来设置列表的编号或项目符号的样式。目前，2022 年 1 月，Safari 支持仅限于颜色和字体大小。
例子：
::marker {
color: red;
font-size: 2rem
}
ul > li::marker {
color: blue;
}
ol > li::marker {
font-size: 1rem
}<ul>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ul>
<ol>
<li>Wake up</li>
<li>Code</li>
<li>Sleep</li>
</ol>【讨论】：
根据所需的 IE 支持级别，您还可以使用 :before 选择器并将项目符号样式设置为内容属性。
li {
list-style-type: none;
font-size: small;
}
li:before {
content: '\2022';
font-size: x-large;
}
您可能需要查找 HTML ASCII 以获得所需的项目符号样式，并使用 converter 作为 CSS Hex 值。
【讨论】：
:before 伪元素将在文本流中，没有在左侧分隔，所以如果列表项有 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>无需更改标记
【讨论】：
:before，而不是::before；其次，与 dzimney 的回答相同的问题：伪元素将在文本流中，而不是在左侧分隔，所以如果列表项有 2 行以上，这看起来很丑
border-radius: 100% 来使子弹圈起来
如果您不想用<span>s 将<li>s 中的内容包装起来，您也可以像这样使用: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>
【讨论】：
<ul>
<li id="bigger"></li>
<li></li>
<li></li>
</ul>
<style>
#bigger .li {height:##px; width:##px;}
</style>
【讨论】：
您必须使用图像来更改子弹本身的实际大小或形状：
您可以使用带有适当填充的背景图像来微调内容，使其不重叠：
list-style-image:url(bigger.gif);
或
background-image: url(images/bullet.gif);
【讨论】：
如果您将<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:before 解决方案的主要问题是，如果列表项长于一行，则不会在第一行文本之后正确缩进。通过使用带有负填充的文本缩进，我们可以规避这个问题并使所有行正确对齐：
ul{
padding-left: 0; // remove default padding
}
li{
list-style-type: none; // remove default styles
padding-left: 1.2em;
text-indent:-1.2em; // remove padding on first line
}
li::before{
margin-right: 0.5em;
width: 0.7em; // margin-right and width must add up to the negative indent-value set above
height: 0.7em;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
background-color: orange;
content: ' '
}
【讨论】：
此方法将光盘移出原始光盘所在的文本流，但可以调整。
ul{
list-style-type: none;
li{
position: relative;
}
li:before {
position: absolute;
top: .1rem;
left: -.8em;
content: '\2022';
font-size: 1.2rem;
}
}
【讨论】：
这是一个Unicode 版本。这个允许您将任何您喜欢的文本符号或表情符号放入您的 CSS 项目符号列表中。您只需要 Unicode“代码点”值。
<style>
#html_list{
position: relative;
margin-left: 1em;
list-style: none;
}
#html_list li::before {
display: inline-block;
content: "\2023";
color: #114f66;
font-size: 3rem;
line-height: 0;
padding: 0 .1em 0 0;
margin: 0;
text-align: left;
vertical-align: top;
position: relative;
top: .2em;
left: 0em;
}
#html_list li {
text-align:left;
vertical-align: top;
padding: .2em 0em .2em 0em;
margin: 0;
font-size: 1rem;
}
</style>
<ul id="html_list">
<li><a href="#">Area 1</a></li>
<li><a href="#">Area 2</a></li>
<li><a href="#">Area 3</a></li>
</ul>
在列表中使用 Unicode 或文本符号的主要问题是调整大小。即使您去掉了高度、行高、填充和边距，符号在使用字体大小调整大小后仍有间距。其中大部分是基于您选择的字体。小心并在 CSS 中选择具有一系列 Unicode 字形的字体。
我在上面设计了最好的解决方案，它使用伪元素将 Unicode 项目符号文本及其样式与列表文本的其余部分分开。这个想法允许您删除父无序列表中的默认列表样式项目符号，将新的 Unicode 项目符号插入到 ::before 伪元素中。然后，您可以根据需要调整大小和重新定位它。将已调整大小的项目符号与列表文本对齐后，您可以根据需要开始填充或调整列表文本的大小，项目符号应随之移动。
【讨论】：
还没有看到提到过这种技术。它基本上允许你有一个你想要的任何大小的“点”。它使用圆形边框来绘制圆形。
li {
list-style-type: none;
position: relative;
margin-left: 2.5rem;
}
li:before {
content: " ";
border: 1rem solid #1b1b1b;
border-radius: 99rem;
height: 0; /* it's all controlled by the border */
width: 0;
margin-top: -0.4rem;
margin-left: -2.5rem;
position: absolute;
}
【讨论】：