在 CSS 中，:before 偽元素允許我們在選定的元素前插入內容。這個偽元素創建的內容在元素的內部，但在開始標簽之前顯示。它被用來添加一些額外的修飾元素的內容，例如添加圖標或者其他的裝飾。

使用 :before 偽元素，我們可以為元素創建一些類似于 '追加' 或者 '前置' 的效果。這種技術可以用來創建各種形狀和裝飾，從而讓我們的 CSS 更加富有創意。在下面的代碼示例中，我們將通過:before在標題前添加斜杠，使我們的標題看起來更加生動：

h2:before {
content: ' /';
margin-right: 10px;
}

在這個代碼示例中，我們使用了 :before 偽元素來為 h2 標題添加裝飾。我們設置了 content 屬性來在標題前添加一個斜杠，然后使用 margin-right 屬性來增加斜杠和標題之間的間距。

使用 :before 偽元素還可以為某些元素添加圖標。我們可以使用 Webfont 或者 SVG 圖標來創建這些圖標，并且這些圖標可以任意大小或顏色，而不會影響頁面中其他部分的樣式。以下是一個示例代碼，展示如何使用 :before 偽元素添加一個簡單的 SVG 圖標：

a[href^="https://"]:before {
content: '\e001';
font-family: 'myfont';
margin-right: 5px;
color: #999;
}
@font-face {
font-family: 'myfont';
src: url('myfont.svg');
font-weight: normal;
font-style: normal;
}

在這個代碼示例中，我們首先為帶有 "https://" 的鏈接添加了一個 :before 偽元素。我們設置了 content 屬性并使用 Unicode 字符來指定一個殘缺的圖標。接著，我們使用 font-family 屬性指向一個包含我們所需圖標的字體，同時標記其為 SVG 格式。在設置樣式之前，我們需要確保我們已經加載了 myfont.svg 文件，并且可以在頁面上成功顯示。

總結一下，:before 是一個非常有用的 CSS 偽元素，它使我們可以在選定的元素前添加內容。我們可以使用它為元素添加一些裝飾，圖標和其他視覺效果，從而讓我們的頁面更加生動有趣！