CSS中before的用法 CSS中before偽元素可以在一個元素之前插入一些內容，可以用來實現一些非常有趣的效果。 在使用before偽元素之前，我們需要先理解偽元素的概念。偽元素是指在頁面上并不存在的元素，但是可以通過CSS來創建。在CSS中，通過::before（或者:before）來表示before偽元素，而通過::after（或者:after）來表示after偽元素。 下面是一個例子，我們可以通過before偽元素在一個div元素前面插入一個“Hello, world”的文本。

div::before {
content: "Hello, world";
}

在上面的例子中，我們使用了content屬性來指定偽元素的內容。注意，在before偽元素中，必須要有content屬性才能正常工作。此外，在content屬性中，我們可以使用一些特殊的符號來表示某些特殊的字符，例如\0020表示空格，\00a0表示不斷行的空格等等。 下面是另一個例子，我們可以通過before偽元素來實現一個簡單的提示框效果。

div.tooltip {
position: relative; /* 設置定位為相對定位 */
}
div.tooltip::before {
content: attr(data-content); /* 使用data-content屬性的值作為偽元素的內容 */
position: absolute; /* 設置定位為絕對定位 */
left: 0;
top: -50px; /* 向上50像素，剛好覆蓋住原來的內容 */
background: #ccc;
padding: 5px;
color: #333;
border-radius: 5px;
display: none; /* 初始隱藏 */
}
div.tooltip:hover::before {
display: block; /* 鼠標懸停時顯示 */
}

這里我們把before偽元素應用到一個帶有data-content屬性的div元素上，并且在data-content屬性的值上顯示提示框。注意，在before偽元素中，我們使用了attr(data-content)來獲取data-content屬性的值作為偽元素的內容。此外，我們還使用了:hover偽類來在鼠標懸停時顯示提示框。 總結 本篇文章介紹了CSS中before偽元素的用法，可以通過before偽元素在一個元素之前插入一些內容，還可以用來實現一些非常有趣的效果。通過掌握before偽元素的使用方法，我們可以更好地利用CSS來實現我們的設計效果。