嗨～今天是第15天！終於一半啦！！！
今天要來談談CSS的偽元素，有了偽元素讓元素能添加更多效果、變化，網頁設計也能更多樣，是很常用的設定之一。
前面的天數有談到：
Day3-5. 制定網站內容
Day6-9. Figma教學
Day11. 切版前知識(一) VSCode 使用教學、擴充套件推薦
Day12. 切版前知識(二) HTML 教學、常用標籤

偽元素

偽元素顧名思義不是真的元素，他不存在在HTML中，而是使用CSS語法對指定元素修改特定部分樣式。最常用的偽元素有兩個 :before、:after ，代表了加在元素的前方或後方，常會用來做裝飾，。

很重要的一點是「偽元素的內容需要搭配content屬性來設置」，所以添加偽元素的時候一定要記得加入content屬性！

    div {
        transition: all .3s ease-in-out;
        border: 2px solid red;
        width: 100px;
        height: 50px;
    }

    div.item1 {
        position: relative;  /*::before用來絕對位置的標準*/
    }

    div.item1::before {
        content: ""; /*偽元素必備*/
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: green;
        position: absolute; /*需要添加才會顯示*/
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
    }

添加::before偽元素前

添加::before偽元素後

我在作品集中也用到許多偽元素來做裝飾，尤其是想專為特定元素設定時，下面舉幾個例子說明：
Luna的線上作品集

標題1

  <div class="title-style title-style1 margin-setting">
       <h2>About Me</h2>
       <p class="ml-10">關於我</p>
  </div>
          
<style>          
.title-style h2 {
  font-family: 'Rubik';
  font-size: 2.5rem;
  position: relative;
}
.title-style1 h2:before { /*添加黃色圈圈裝飾在About最前方*/
  content: "";
  width: 40px;
  height: 40px;
  background: #FFD43C;
  border-radius: 50%;
  position: absolute;
  left: -5px;
  bottom: 5px;
  z-index: -1;
}
</style>

標題2

<div class="title-style title-style2 text-center margin-settingB">
     <h2>Experience</h2>
     <p><span>工</span><span>作</span><span>經</span><span>驗</span></p>
     <!--將工作經驗分成單個字元，在每個字元下添加小黃色圈圈作為裝飾-->
</div>
          
<style>
.title-style2 span {
  position: relative;
}

.title-style2 span:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD43C;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

選單menu項目

<ul class="navbar-nav">
              <li class="nav-item" data-section="section-aboutme">
                <a class="nav-link" href="#section-aboutme">關於我<span class="show-mb ml-10">About Me</span></a>
              </li>
              <li class="nav-item" data-section="section-experience">
                <a class="nav-link" href="#section-experience">工作經驗<span class="show-mb ml-10">Experience</span></a>
              </li>
              <li class="nav-item" data-section="section-works">
                <a class="nav-link" href="#section-works">作品展示<span class="show-mb ml-10">Works</span></a>
              </li>

</ul>
          
<style>
.navbar-nav .nav-item .nav-link:before { /*在選單menu項目下添加偽元素裝飾*/
  transition: all ease-in-out .3s;
  content: "";
  width: 0;  /*偽元素長度為0*/
  height: 10px;
  background: #FFD43C;
  background-size: 100%;
  border-radius: 5px;
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: -1; /*層級放置下方*/
}
.navbar-nav .nav-item .nav-link:hover:before,
.navbar-nav .nav-item.active .nav-link:before { /*滑鼠懸停時偽元素長度變為100px*/

  width: 100px;
}
</style>

經過這些舉例，應該能看出來善用偽元素能做到很多變化，真的是很好用的設定呢！
明天是CSS最後一章，最後來講講動畫設定，明天見！