CSS是一種用于展示網頁內容的樣式表語言，在網頁設計中有著重要的作用。在CSS中，我們可以通過一些簡單的代碼實現刻度的繪制。

/* 縱向刻度條樣式 */
.scale{
width: 10px;
height: 100px;
background: #eee;
position: relative;
float: left;
margin-right: 10px;
}
.scale:before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: #333;
}
.scale:after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: #333;
}
/* 橫向刻度條樣式 */
.scale-horizontal{
width: 100px;
height: 10px;
background: #eee;
position: relative;
margin-bottom: 10px;
}
.scale-horizontal:before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #333;
}
.scale-horizontal:after{
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #333;
}

代碼中使用了偽元素:before和:after，通過它們可以實現樣式的擴展和優化。在縱向刻度條樣式中，我們定義了刻度條的高度和寬度，設置了背景和位置等屬性。使用:before和:after分別實現了刻度條的頭部和底部的繪制，其中用到了transform屬性，來實現元素的位移。

橫向刻度條樣式與縱向刻度條樣式類似，通過設置不同的屬性，實現了水平方向的刻度條。在橫向刻度條樣式中，我們同樣使用了偽元素:before和:after，定義了刻度條頭部和底部的樣式，實現了橫向刻度條的繪制。