CSS 偽元素是指在 Web 頁面中新增一些虛擬元素，使開發者能夠對這些元素進行樣式上的控制和改變，而不必在 HTML 中添加無意義的標簽。其中，偽元素在實際頁面中并不存在，它們只是表現頁面上的某些元素而已。

常見的 CSS 偽元素如下：

::before
::after
::first-letter
::first-line
::selection

接下來，我們來看看如何使用偽元素將一個元素水平居中。首先，我們需要在 CSS 中定義該元素的寬度和高度，并設置它的 position 為 relative，如下：

.box {
width: 200px;
height: 100px;
position: relative;
}

接著，在 .box 中添加偽元素 ::before 和 ::after，將它們的 content 屬性設置為空字符串，并設置它們的 display 屬性為 inline-block 或 table-cell，以便于對它們進行水平居中操作，如下：

.box::before,
.box::after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}

此時，我們需要將 .box 中的實際內容設置為 inline-block 或 table-cell，并設置其 vertical-align 屬性為 middle，以使它們和偽元素垂直居中，代碼如下：

.box {
width: 200px;
height: 100px;
position: relative;
display: table-cell;
vertical-align: middle;
}

在這一過程中，偽元素 ::before 和 ::after 扮演了一個容器的角色，其寬度為 0，高度等于 .box 的高度，從而實現元素在水平方向的居中對齊。

綜上所述，我們可以通過偽元素實現頁面元素的更多樣式效果。對于更深入的學習，建議大家多加練習和實踐。