CSS中的偽元素（Pseudo-elements）可以讓我們在HTML元素的前后添加一些裝飾性內容，比如CSS3的:before和:after。這兩個偽元素可以讓我們在元素的開頭和結尾添加一些特殊的內容。

在使用:before和:after之前，需要先給它們設定content屬性，用來定義在元素前面或后面添加的內容。除了content屬性外，還可以使用其他CSS屬性來設定偽元素的樣式。

以下是一個簡單的例子，使用:before為一個鏈接添加圖標：

a:before {
content: url(icon.png);
vertical-align: middle;
margin-right: 5px;
}

注意：使用:before和:after時，需要給元素設置position屬性，以便偽元素定位。

另外，也可以使用:before和:after來生成一些單獨的圖形，比如箭頭、三角形等等。以下是一個用:before生成三角形的例子：

.arrow:before {
content: "";
display: inline-block;
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #000;
margin-right: 10px;
}

以上代碼會為一個類名為“arrow”的元素添加一個向右的三角形。其中，內容為空，display設為inline-block，是為了讓偽元素可以使用border屬性來生成三角形。border-top和border-bottom設為transparent是為了讓上下兩邊不出現邊框，只顯示右邊的邊框（即為三角形的邊）。

CSS3的:before和:after偽元素可以為我們的網頁增添很多有趣的元素和交互方式，更多的效果可以通過嘗試來實現。