CSS教程的第18課是一個非常重要的教程，它介紹了CSS選擇器中的偽元素。

:before和:after是兩個常見的偽元素，在CSS布局方面非常常用。這兩個偽元素可以在元素前面或者后面插入一些內容。

下面是一個示例：

div:before {
content: "這是插入在div前面的內容。";
}
div:after {
content: "這是插入在div后面的內容。";
}

在上述代碼中，我們用div選擇器分別選中了一個元素，并使用:before和:after偽元素來插入內容。而通過content屬性，我們可以向這些偽元素中寫入文本或圖像等內容。

另外，我們也能夠使用:before和:after偽元素來生成各種形狀和效果。比如可以使用:before來生成一個三角形元素，如下代碼所示：

div:before {
content: "";
width: 0;
height: 0;
border-top: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

這里我們通過調整border的屬性來生成一個三角形元素，并使用:before偽元素來將其插入到div元素前面。這是一個非常實用的技巧，可以給頁面增添很大的美感和創意。

綜上所述，使用:before和:after偽元素可以給我們帶來很多的優勢。CSS選擇器非常強大，大家加油！