在CSS中，我們經常使用空元素來實現一些視覺效果。空元素指的是沒有內容的HTML元素，它們僅僅用來裝飾或者布局其他元素。以下是CSS中常用的空元素：

::before {
content: "";
}
::after {
content: "";
}

::before偽元素

::before偽元素用于在一個元素的內容前插入內容。它是一個空元素，需要使用content屬性定義內容。::before偽元素可以用于在一個元素前面插入一個圖標或者裝飾。

/* 在元素前插入圖標 */
.icon::before {
content: url('icon.png');
}
/* 在元素前插入一個裝飾橫線 */
.line::before {
content: "";
display: block;
border-bottom: 2px solid #000;
}

::after偽元素

::after偽元素用于在一個元素的內容后插入內容。它同樣是一個空元素，需要使用content屬性定義內容。::after偽元素可以用于實現一些特殊效果，例如清除浮動、實現響應式布局等。

/* 清除浮動 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 響應式布局 */
.button::after {
content: "";
display: block;
margin-left: 10px;
}
@media (max-width: 768px) {
.button::after {
content: "";
display: none;
}
}

總結

CSS中的空元素是一個非常實用的特性，它可以幫助我們實現各種視覺效果和布局。通過使用::before和::after偽元素，我們可以輕松地在一個元素前后插入內容，實現一些特殊的效果。同時，我們還可以使用空元素來清除浮動、實現響應式布局等。