css 有序列表_使用CSS创建装饰的有序列表

css 有序列表

HTML ordered lists can be incremented in many different languages, but customizing the appearance of the leading numbers in each list item is rather difficult. Formatting the list in an OpenType font and using font-feature-settings to produce a special numbers option is one possibility, but there is an easier method. By using the under-appreciated CSS counters property – usually associated with generating point-numbered lists – we can customize the leading numbers with abandon.

HTML有序列表可以用多种不同的语言递增，但是自定义每个列表项中前导数字的外观相当困难。 将列表格式化为OpenType字体并使用font-feature-settings生成特殊数字选项是一种可能，但是有一种更简单的方法。 通过使用未被重视的CSS counters属性(通常与生成点编号列表相关联)，我们可以放弃自定义前导数字。

Given a standard HTML ordered list:

给定一个标准HTML有序列表：

<h1>Clarke’s Three Laws</h1>
<ol id="clarke-laws">
	<li>When a distinguished but elderly scientist states that something is possible, he is almost certainly right. When he states that something is impossible, he is very probably wrong.
	<li>The only way of discovering the limits of the possible is to venture a little way past them into the impossible.
	<li>Any sufficiently advanced technology is indistinguishable from magic.
</ol>

We do something rather counter-intuitive, turning off the default appearance of the numbered list and setting up a counter-reset property with a variable (point) while pushing it in from the left:

我们做了一些违反直觉的事情， 关闭了编号列表的默认外观，并在从左推入变量的同时设置了带有变量( point )的counter-reset属性：

ol#clarke-laws {
	line-height: 1.6;
	list-style-type: none;
	counter-reset: section;
	margin-left: 3rem;
}

Every new list item increments point by 1:

每个新列表项将point增加1：

ol#clarke-laws li {
	counter-increment: point;
	margin-top: 2rem;
}

point is then added back in front of each list item with a pseudo-selector, and customized:

然后使用伪选择器将 point 添加回每个列表项的前面，并进行自定义：

ol#clarke-laws li:before {
	content: counters(point,"");
	border: 2px solid #000;
	border-radius: 50%;
	display: inline-block;
	float: left;
	width: 3.5rem;
	height: 3rem;
	text-align: center;
	padding-top: .25rem;
	font-weight: 700;
	margin-left: -5rem;
	margin-right: 1rem;
	background: rgba(0,0,0,0.025);
}

添加响应断点 (Adding Responsive Breakpoints)

One of the advantages of this approach is that the point number can be relocated at smaller screen sizes, placing them above each list item:

这种方法的优点之一是可以将点号重新放置在较小的屏幕尺寸上，并将其放置在每个列表项上方 ：

@media screen and (max-width: 30em) {
	ol#clarke-laws	{ 
		margin-left: 0;
	}
	ol#clarke-laws li:before { 
		display: block;
		float: none;
		margin: 1rem auto;
	}
}

You can see this behaviour when you narrow the browser window, or look at the page on a mobile device.

缩小浏览器窗口或查看移动设备上的页面时，可以看到此行为。

Some fonts provide circled numbers as part of the typeface: the primary face on this site, Libertad, offers such a feature. If you have such a typeface and know the HTML entity codepoints for those symbols, the CSS (in this case, written as Sass can be substantially simpler:

某些字体提供带圆圈的数字作为字体的一部分：该站点的主要外观Libertad提供了这样的功能。 如果您有这样的字体，并且知道这些符号的HTML实体代码点 ，则CSS(在这种情况下，用Sass编写可能会更简单：

ol { 
	list-style-type: none;  
	li:before { 
		position: absolute;
		margin-left: -2.7rem; 
		margin-top: -.7rem;
		font-size: 2rem;
		font-weight: 100;
	}
	li { 
		&:nth-child(1):before { content: '\2460'; }
		&:nth-child(2):before { content: '\2461'; }
		&:nth-child(3):before { content: '\2462'; }
		&:nth-child(4):before { content: '\2463'; }
		&:nth-child(5):before { content: '\2464'; }
		&:nth-child(6):before { content: '\2465'; }
		&:nth-child(7):before { content: '\2466'; }
		&:nth-child(8):before { content: '\2467'; }
		&:nth-child(9):before { content: '\2468'; }
	}
}

You can find examples of just such a treatment throughout articles on this site.

您可以在本网站的所有文章中找到此类处理的示例。

翻译自: https://thenewcode.com/855/Creating-Decorated-Ordered-Lists-With-CSS

css 有序列表