CSS 是網(wǎng)頁設(shè)計中不可或缺的重要部分。在編寫樣式表時，經(jīng)常需要設(shè)置行號以便更好地閱讀和排版。 在 CSS 中，我們可以使用 pre 標(biāo)簽來設(shè)置代碼塊的樣式，同時也可以設(shè)置行號。下面是一個示例：

/* 設(shè)置代碼塊樣式 */
pre {
padding: 10px;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
line-height: 1.4;
overflow: auto;
}
/* 設(shè)置行號樣式 */
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;
}

在上面的代碼中，我們首先設(shè)置了 pre 標(biāo)簽的基本樣式，包括邊框、背景色、字體大小等。接著通過偽元素 :before 來添加行號，并設(shè)置樣式。 其中，content 屬性用于插入行號，display: inline-block 讓行號在行內(nèi)顯示，width: 1.5em 設(shè)置行號的寬度為 1.5em，即一個字符的寬度。margin-right: 0.5em 在行號和代碼之間留出一定的空隙。text-align: right 使行號右對齊。color: #999 設(shè)置行號的顏色為灰色，border-right: 1px solid #ccc 添加一條右邊框，padding-right: 0.5em 在右邊框和數(shù)字之間添加一定的空隙。 使用上面的 CSS 樣式后，我們可以在 HTML 代碼中添加 data-line-number 屬性來指定行號。例如：

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

上面的代碼將在第一行顯示行號。通過類似的方式，我們可以在需要的地方添加行號，以便更好地閱讀和調(diào)試代碼。 總之，通過使用 CSS 的 :before 偽元素和 data 屬性，我們可以輕松地為代碼塊添加行號。這對于開發(fā)者和設(shè)計師來說都是非常有用的技巧，可以提高代碼的可讀性和排版效果。