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中。