偽元素的另類用法(:after、:before)

什麼是偽元素? :和::的差別?

:after:before這兩就是偽元素,但為了跟偽類最區別,css3的定義開始,將偽元素改為::after::before

1.偽類

名稱 說明
:active 當元素被點擊
:focus 當元素被選中
:hover 滑過元素上方時
:link 當元素未被點擊
:visited 當元素被訪問過後
:first-child 選取的元素中的第一個元素
:lang 指定元素中使用的語言

2.偽元素

名稱 說明
:after 在元素之前插入某些內容
:before 在元素之後插入某些內容
:first-letter 將樣式設定到內容首字
:first-line 將樣式設定到首行

偽元素的另類使用方法

  1. 字串:在引號內增加想要的內容

    ele:after {
    content: "↓";
    }
    
  2. attr():提取元素的屬性值

    ele:after {
    content: attr(herf);
    }
    
    <a href="https://www.facebook.com/" class="ele">試一試</a>
    
  3. url():插入文件

    ele:after {
    content: url(../images/line.jpg);
    }
    
  4. counter():計數器

    body {
    counter-reset: chapter;
    }
    .ele:after {
    counter-increment: chapter;
    content: counter(chapter);
    }
    
    <a href="" class="ele">a</a>
    <a href="" class="ele">b</a>
    <a href="" class="ele">c</a>
    <a href="" class="ele">d</a>
    <a href="" class="ele">e</a>
    <a href="" class="ele">f</a>
    <a href="" class="ele">g</a>
    <a href="" class="ele">h</a>
    <a href="" class="ele">i</a>
    <a href="" class="ele">j</a>
    

參考資料

Using CSS counters-MDN
详解 CSS 属性 - 伪类和伪元素的区别
详解 CSS 属性 - :before && :after
你所不知的 CSS ::before 和 ::after 伪元素用法

Comments

comments powered by Disqus