css中怎么设置行号 |xepria song ericsson

CSS 是网页设计中不可或缺的重要部分。在编写样式表时，经常需要设置行号以便更好地阅读和排版。 在 CSS 中，大家可以使用 pre 标签来设置代码块的样式，同时也可以设置行号。下面是一个示例：

/* 设置代码块样式 */
pre {
padding: 10px;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
line-height: 1.4;
overflow: auto;
}
/* 设置行号样式 */
pre code:before {
content: attr(data-line-number);
display: inline-block;
width: 1.5em;
margin-right: 0.5em;
text-align: right;
color: #999;
border-right: 1px solid #ccc;
padding-right: 0.5em;
}

在上面的代码中，大家首先设置了 pre 标签的基本样式，包括边框、背景色、字体大小等。接着通过伪元素 :before 来添加行号，并设置样式。 其中，content 属性用于插入行号，display: inline-block 让行号在行内显示，width: 1.5em 设置行号的宽度为 1.5em，即一个字符的宽度。margin-right: 0.5em 在行号和代码之间留出一定的空隙。text-align: right 使行号右对齐。color: #999 设置行号的颜色为灰色，border-right: 1px solid #ccc 添加一条右边框，padding-right: 0.5em 在右边框和数字之间添加一定的空隙。 使用上面的 CSS 样式后，大家可以在 HTML 代码中添加 data-line-number 属性来指定行号。例如：

body {
background-color: #f5f5f5;
font-size: 16px;
color: #333;
}

上面的代码将在第一行显示行号。通过类似的方式，大家可以在需要的地方添加行号，以便更好地阅读和调试代码。 总之，通过使用 CSS 的 :before 伪元素和 data 属性，大家可以轻松地为代码块添加行号。这对于开发者和设计师来说都是非常有用的技巧，可以提高代码的可读性和排版效果。