CSS的文本前正方形是一種常用的裝飾性效果，可以用于列表、導航等各種場景。實現該效果的方法比較簡單，只需使用CSS的before偽類和content屬性即可。

/* 列表前正方形 */
li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
background: #333;
}
/* 導航前正方形 */
.nav-item:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 4px;
border-radius: 50%;
background: #fff;
border: 2px solid #333;
}

在上述代碼中，通過為需要添加正方形的元素設置:before偽類，并設置content屬性為空字符串，然后使用display屬性將其顯示為內聯塊元素，再設置寬高以及其他樣式即可實現文本前正方形的效果。其中，可以通過margin屬性來調整正方形與文本之間的距離，可以通過background屬性來設置背景顏色，也可以通過border屬性來設置邊框樣式。