偽元素介紹

偽元素能夠給予特定元素一些特殊的樣式，跟偽類的如何分辨?通常:是偽類，::是偽元素，不過大多數瀏覽器是會自動分辨的，而偽元素是一種修飾用的語法，例如可以讓<p>一開始的第一行字有特殊設定，粗體加黑等當你切成第二行時就不套用這樣。

before

這個偽元素是用於在元素前插入這個的設定
更值觀的請看下圖

那麼來看before的呈現

<style>
        p::before {
            content: "Hello world!";
            background-color: aqua;
        }
        p{
            background-color: red;
        }
</style>
<div class="d-flex justify-content-center flex-wrap mt-5">
        <p> Html/Css.</p>
</div>

div單純是拿來校正的，其class為bootstrap，如果沒有link導入也不影響使用，只不過呈現會在左上角有點醜醜的
content為文本，通常會用在相似的地方來插入，不過p概括太多通常是會給予指定的元素，又或是自定義標籤，使用選擇器之類的來觸發。

然後你會發現before的背景跟p本身的背景是重疊的，而之所以背景會上下包起來，是因為插入文字的預設display為inline這個的特性便是寬高都是auto自動調節，只要將display更改成inline-block自成一個完整區塊即可。

也可以設定表頭的記數

 p:before {
            counter-increment: number;
            content: counter(number) ".";
}

counter-increment:設定記數後面的number視為變數即可。
content很長拿來跟before/after做使用
還有很多設定例如給icon前面設一個框架放置等等

after

盡然有在原先程式前的插入，那自然也有在之後再插入的啦。
在文字的意義上就只是單純的放前放後。

關於跟before有沒有更多差異，小弟還在探索謝謝，不過他在動畫的使用上也是有一定位子。

content

我覺得這個也挺重要的所以開一個小章節
content如上所說是創建一個文本的，如果你有拿第一個程式範例來測試，就可以發覺自成一個區塊，那代表者甚麼?
代表可以利用他來觸發transition，這個是必須要有物件的實際位移才可以觸發他的效果

但用在動畫上，目前我知道的運用，如果只需要一個區塊的話不論是after又或是before皆可達成

那after就只是單純放在程式後面前面?當然不是，當然運用到雙區塊的時候就可以用到他啦，例如兩個顏色從兩側填滿就可以運用兩側的區塊填滿中間的區塊。

接下來讓我們來看看做動畫需要了解哪些吧
謝謝觀看~