html - 是否可以在不使用文本包装器的情况下使用不同字体大小的列表编号和列表内部文本?

标签 html css

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

这是标记:

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>

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

提前致谢

最佳答案

如果你想给数字赋予不同的大小试试这个 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;
}

关于html - 是否可以在不使用文本包装器的情况下使用不同字体大小的列表编号和列表内部文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27604731/

相关文章:

css - Polymer::host 和::content CSS 选择器的区别

html - 如何防止文本在插入的元素下换行?

javascript - 位置为 :fixed leaves gray trail after scrolling 的传单

html - Angular 2 - 变量更改时更新 View

javascript - 使用 document.createElement() 创建元素,然后使用 document.getElementById() 设置 id 未定义

html - 如何将图像放在div的顶部?

html - 当我向下或向上滚动页面时,如何使图像向下或向上滚动?

javascript - 单击时跨度不更改类

html - [class$ =""] 和 [id* =""] 有什么特殊性?

css - JSF加载资源为静态资源