CSS3里的::after是一個偽元素,它可以讓我們在目標元素的最后面添加一個內容,常常用于設置樣式而不改變HTML結構。以下是一個例子:
.box::after { content: " "; display: block; width: 50px; height: 50px; background: red; }
上面的代碼會在.box元素的最后面添加一個紅色正方形塊,它的寬高都是50像素。
::after偽元素可以被用于應用一些很酷的效果,比如加入一些視覺的元素,像是圖標,箭頭等。還可以用來完善網站的版面設計,比如在菜單前面或后面添加裝飾性的線條或其他符號。
需要注意的是,::after不會生成一組新的元素,它只是在目標元素的末尾插入偽元素,因此它不會改變文檔的結構,也不會增加額外的DOM元素。
除了::after之外,CSS3還提供了::before偽元素,它與::after用法相似,不同之處在于它會在目標元素的最前面添加一個內容。
使用::after和::before偽元素可以讓我們在不改變HTML結構的情況下,輕松的在元素前后添加內容。這個特色讓它們成為一個非常有用的工具!
上一篇mysql查第二行數據
下一篇css3重力下落