CSS中的before和after偽元素常用于為HTML元素添加額外的內容。在使用這兩個偽元素時，應將它們添加到元素的內容之前或之后。這兩個偽元素可以通過CSS樣式來設置它們的內容、樣式、位置等屬性。

在CSS中，::before偽元素在目標元素的內容之前創建一個偽元素。使用::before時，需要定義content屬性，并在其中指定需要添加到目標元素之前的內容。 默認情況下，偽元素是內聯元素。因此，我們可以通過設置display屬性來改變偽元素的顯示方式，例如，將其改為塊狀元素。

/* 以下CSS代碼添加了一個黃色方塊作為所有段落的前置元素 */
p::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: yellow;
margin-right: 10px;
}

而::after偽元素則可以在目標元素的內容之后創建一個偽元素。同樣，需要使用content屬性來定義添加到目標元素之后的內容。

/* 以下CSS代碼添加了一個“Learn More”按鈕作為所有鏈接的后置元素 */
a::after {
content: "Learn More";
display: inline-block;
padding: 5px;
background-color: blue;
color: white;
margin-left: 10px;
}

需要注意的是，這兩個偽元素都是使用CSS樣式來控制的，并不會影響HTML代碼中的內容。因此，使用這兩個偽元素來增強頁面的視覺效果和交互性是一個好的實踐。