我們知道 ::before 和 ::after 是 CSS 中的偽類，它們基本功能是在 CSS 渲染中向元素的內(nèi)容前面和后面插入內(nèi)容瘾腰。雖然在實際 HTML 中我們沒有增加任何標簽皆的，并且會在瀏覽器中展現(xiàn)出來。
他們在實際的開發(fā)過程中我們使用的比較少蹋盆，但是它的確有很巧妙的地方值得我們來開發(fā)：
動態(tài)在元素中添加字符串
- 場景：當需要在列表费薄、或者多處相同樣式中增加一個不變的字符串時，我們可以使用它栖雾；
- 例如：產(chǎn)品列表楞抡，價格的展示前面都加上
￥； - 建議：注意場景析藕，少使用召廷；
- 代碼：
.price::before {
content: "￥"
}
不改變元素尺寸的邊框
- 場景：在寬度為百分比的元素中，為此元素增加邊框账胧，此時會導致元素超過原有的百分比竞慢；
- 例如：導航條寬度為文檔的 100% ，剛好撐滿文檔治泥，但是需要在周圍增加 1px 的邊框筹煮，導致導航條寬度超過了瀏覽器寬度；
- 建議：中等程度使用居夹，有替代方案败潦；
- 代碼：
.meun {
width: 100%;
height: 80px;
position: relative;
}
.menu::before {
content: ""
position: absolute;
left: 0;
border-left: 1px solid #ccc;
}
.menu::after {
content: ""
position: absolute;
left: 0;
border-right: 1px solid #ccc;
}
0.5px 細邊框
簡單幾何圖形
- 場景：很多簡單的幾何圖形，我們可以通過它們只需要用一個樣式就可以解決問題准脂；
- 例如：帶尖角的氣泡對話框劫扒、篩選組件的下拉箭頭；
- 建議：強烈推薦意狠；
- 代碼：
.select::after {
content: "";
position: absolute;
top: 50%;
margin-top: -7px;
right: 10px;
display: inline-block;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 14px;
height: 14px;
transform: rotate(-45deg);
}
清除浮動
- 場景：當一個元素在眾多設置了浮動樣式
float: left的后面粟关，但是又要另起一行時； - 建議：強烈推薦环戈；
- 代碼：
.container::before {
content: "";
display: table;
}
.container::after {
clear: both;
}
總結(jié)
利用 ::before ::after 偽類闷板，動態(tài)的在元素開始和末尾增加標簽這一特性，我們可以做出很多豐富的樣式而且又減少了 DOM 的復雜度院塞，當然它還有更多更豐富的用法等待著我們來挖掘遮晚。
