CSS是前端開發中關鍵的技術之一，通過CSS樣式表可以為網頁美化、布局、定位等方面提供強大支持。本文將介紹一種CSS在布局方面的應用——沿著X軸無限延伸。

.box {
background-color: pink;
height: 50px;
width: 100%;
position: relative;
}
.box:before, .box:after {
content: "";  
display: block;
position: absolute;
width: 100%;
height: 50px;
background-color: pink;
z-index: -1;
}
.box:before {
right: 100%;
}
.box:after {
left: 100%;
}

如上代碼所示，我們指定一個具有50px高度和100%寬度的背景框，此時我們希望這個背景框可以像眼前的這個段落一樣，能夠沿著X軸無限延伸，我們就可以通過偽元素:before和:after來實現。

偽元素是CSS的一種特殊元素，它可以在指定元素的前面或后面添加一個虛擬的元素，并且可以用CSS樣式來控制其內容和布局。

在上述代碼中，我們先定義一個類名為.box的元素，然后給它設置了背景顏色、高度和寬度，最后指定相對定位。接著，我們在.box的:before和:after偽元素中分別添加一個與.box相同高度和寬度的矩形塊，并設置同樣的背景顏色，將z-index設置為-1以防止遮擋主元素。

接下來，我通過相對定位將:before元素定位到右側100%的位置，即始終位于.box元素的左側；而將:after元素定位到左側100%的位置，即始終位于.box元素的右側。這樣，我們就實現了一個簡單的沿著X軸無限延伸的效果，如下圖所示。

在實際開發中，我們可以通過更改:before和:after元素的顏色、大小和傾斜角度等屬性，來實現更加多樣化的延伸效果。

總的來說，通過使用偽元素，我們可以快速實現一些比較復雜的布局效果，像這種沿著X軸無限延伸的效果，在視覺上也能夠起到很好的裝飾作用。