::before
和::after
是偽元素(pseudo-element),可以在原本的元素標籤前後加上其他效果。
<div id="demo1">hello</div>
<style>
#demo1::before{
content:"this is before";
color:blue;
}
#demo1::after{
content:"this is after";
color:red;
}
</style>
上面程式效果如下
hello
在Chrome瀏覽器的開發者模式的html顯示如下。
::before與::after預設是inline的排列效果。
::before與::after會繼承所套用元素的屬性,例如套用元素的字型大小為24px,則會繼承此樣式,當然也可以覆寫原本的樣式。
content為必要屬性,若不要有任何文字可設成空字串content:""
,且content的內容不會出現在html中。
沒有留言:
張貼留言