是否可以在不使用文本包装器的情况下使用不同的列表编号字体大小和列表内部文本？ [复制]

Posted 2023-02-23

【中文标题】是否可以在不使用文本包装器的情况下使用不同的列表编号字体大小和列表内部文本？ [复制]

【英文标题】：Is it possible to have a different font-size of list number and list inner text without using a wrapper for the text? [duplicate]

【发布时间】：2015-02-20 16:08:56

【问题描述】：

我有一段由第三位用户创建的标记。而且我必须根据设计为该标记应用一些基本样式。

这里是标记：

body
  color: rgba(42, 39, 52, 1);
  font-size: 18px;


ul, ol 
    margin: 0 0 20px 0;


ul, ol 
    padding-left: 30px;
    list-style-position: inside;

<ol>
	<li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
	<li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
	<li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
	<li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
</ol>

我正在尝试对列表项的编号和文本本身应用不同的字体大小。我的标记有可能吗？

提前致谢

【问题讨论】：

您希望列表编号和文本的大小分别不同吗？还是整个文本？

我需要例如 36px 用于数字，18px 用于数字之后的文本

【参考方案1】：

如果你想给数字赋予不同的大小，试试这个http://jsfiddle.net/efe1n7we/

ol 
list-style-type: none;
counter-reset: ol-counter;

ol li:before 
font-size:50px;
content: counter(ol-counter);
counter-increment: ol-counter;