網頁

2017/8/28

CSS ::before ::after

CSS的::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中。

沒有留言:

張貼留言