css偽元素（before與after）

mo0n1andin 發布于2019-08-29 18:38 / 1222人閱讀

摘要：最近因為一些網頁的需要，比較深入的使用了的偽元素，發現原來不只是用用或而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀錄一下。

最近因為一些網頁的需要，比較深入的使用了CSS的“偽元素”（Pseudo Element），發現原來不只是用用before或after而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法紀錄一下。

什么是“偽元素”？
“偽元素”之所以稱作“偽”，除了英文從“Pseudo”翻譯過來之外，就是因為它并不是真正網頁里的元素，但行為與表現又和真正網頁元素一樣，也可以對其使用CSS操控。

跟偽元素類似的還有“偽類”（Pseudo classes），在W3C的定義里總共有五個偽元素（其他仍在測試階段），分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區分，偽元素使用兩個冒號“::”開頭，而偽類使用一個冒號“:”開頭（像是:hover、:target…等）。

雖然現在的瀏覽器就算寫一個冒號也可以正常運作，不過為了方便區分，用兩個冒號還是比較好的，而且不論瀏覽器是什么，::selection必須是兩個冒號才能正常運作。

認識::before與::after
::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素“之前”加入內容，::after則是在原本的元素“之后”加入內容，同時偽元素也會“繼承”原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。

舉例來說，下面這段代碼，有一個div內容是“大家好，我是div”，使用::before、::after之后，會在原本div的前后各添加一段文字，并且讓這兩段文字都呈現紅色。

div::before{
    content:"我是 before";
    color:red;
}
div::after{
    content:"我是 after";
    color:red;
}

實用的content
上述的內容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是只有content:“”；都可以，因為沒有content的偽元素是不會出現在畫面上的，然而content是個很特別的屬性，它可以使用attr直接獲取內容元素的屬性值（attribute），舉例來說，在HTML里有一個超鏈接，點擊后會彈出新視窗并連接至Google：

google

使用下列的代碼用法，將會把超鏈接的href內容與target內容，透過偽元素一前一后的顯示出來。

a::before{
  content: attr(href);
  color:red;
}
a::after{
  content: attr(target);
  color:green;
}

此外content內容是可以“相加”的，不過用法不像JavaScript使用+號來相連，而是直接用一個空格鍵就可以不斷的累加下去，以下面的代碼來說，可以在剛剛擷取的超鏈接文字后方和target屬性前方，加入標點符號。

a::before{
  content: "( " attr(href) " ) < ";
  color:red;
}
a::after{
  content: " > ( " attr(target) " ) ";
  color:green;
}

content甚至可以使用url放入圖片圖片的功能，下列的代碼會呈現出三張圖片。

div::before{
  content:url(圖片網址) url(圖片網址) url(圖片網址);
}

content搭配quotes使用
在CSS里有個不常用的屬性就是quotes，這是做為定義“括號格式”的屬性，也就是如果在一段文字被包住，這段文字的前后就會出現自定義的括號，而且quotes支持巢狀的結構，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：

最外層第一層第二層第二層第三層

quotes的屬性如果只寫一層，就會看到只出現一種括號，前后括號使用空白區隔，兩組為一個單位，前后可以不同符號。

q{
  quotes: " < " " > ";
}

如果寫了三層，就會看到出現三種括號，支持把文字當作括號使用。

q{
  quotes: " < " " > " " ya " " ya " " ( " " ) " ;
}

同樣的道理，我們可以應用在content里面，而且透過偽元素已::before和::after已經處于前后的預設位置，甚至不用就實現前后括號的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：

最外層第一層第二層第二層第三層

CSS的部分比較特別，在偽元素content里使用了open-quote（啟始括號）和close-quote（結束括號）這兩個有趣的值，換句話說open-quote對應到，close-quote對應到，此外也由于括號是在偽元素內，就可以指定不同的顏色或樣式了。

span{
  quotes: " < " " > " " ya " " ya " " ( " " ) " ;
}
span::before{
  content:open-quote;
  color:red;
}
span::after{
  content:close-quote;
  color:#aaa;
}

小結
雖然說偽元素很好用，但偽元素的內容實際上不存在網頁里（如果打開瀏覽器的開發者工具，是看不到內容的），所以如果在里頭塞了太多的重要的內容，反而會影響到SEO的效果，因此對于使用偽元素的定位，還是當作“輔助”性質會比較恰當。

GPU云服務器云服務器偽元素獲取偽元素 css元素 before

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114467.html

詳解 CSS 屬性 - :before && :after

摘要：現在我們經常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應該位于后面，如果順序改為是無效的。現在我們經常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 評論0 收藏0
詳解 CSS 屬性 - :before && :after

摘要：現在我們經常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應該位于后面，如果順序改為是無效的。現在我們經常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 評論0 收藏0
CSS基礎篇-- :before && :after的用法，偽類和偽元素的區別

摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...

X_AirDu 2019-08-28 18:15 評論0 收藏0
CSS（一）偽元素的巧用

摘要：并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...

entner 2019-08-30 15:53 評論0 收藏0