CSS :befor :after 偽元素的妙用
本篇重點介紹CSS中的:befor、:after建立的偽元素幾種使用場景,如填充文字、作為iconfont、進度線、時間線以及幾何圖形。
1. 介紹
1.1 說明
CSS中的:befor、:after都會建立一個偽元素,其中:befor建立的偽元素是所選元素的第一個子元素,:after建立的偽元素是所選元素的最後一個子元素。
:befor、:after建立的偽元素預設樣式為內聯樣式。
1.2 語法
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3引入了 ::(兩個冒號)是用來區分偽類(:一個冒號)和偽元素(::兩個冒號)。
偽類:操作元素本身,如 :hover、:first-child、:focus等等。
偽元素:操作元素的子元素,如 ::before、::after、::content等等。
在IE8中只支援:(一個冒號),所以為了相容這些瀏覽器也可以使用 :befor、:after。
1.3 content屬性
content 屬性表示偽元素填充的內容。
示例
CSS:
.test-div { width: 100px; height: 100px; margin-left: 20px; background-color: #eee; } .test-div::before { content: "♥"; color: red; } .test-div::after { content: "♥"; color: blue; }
HTML頁面:
效果:
1.4 可替換元素
可替換元素(replaced element):其展現不由CSS來控制的。這些元素是一類外觀渲染獨立於CSS的物件。
典型的可替換元素有<iframe>、<img>、 <object>、 <video> 以及 表單元素,如<textarea>、 <input> 。
某些元素只在一些特殊情況下表現為可替換元素,例如 <audio> 和 <canvas> 。
:befor :after 在此類元素內是不生效的。
1.5 瀏覽器支援情況
IE9版本才開始完全支援 :befor :after ,Chrome、Firefox現都已全線支援。
IE | Edge | Firefox | Chrome | Android Chrome |
iOS Safari |
9 | all | 2 | all | all | all |
2. 應用場景
2.1 支援文字字元
說明:content屬性支援文字字元。
示例:
2.2 支援iconfont
說明:content屬性也支援iconfont字型圖表的展示。這也是使用最多的場景。
示例:此示例已引用了阿里iconfont圖示庫
2.3 進度線與時間線
說明::befor :after建立的偽元素可以以線條方式定位在元素周邊的指定位置上,如進度線和時間線。
1) 進度線
2) 時間線
2.4 幾何圖形
說明:通過設定 :befor :after 偽元素的border相關屬性,可建立非常多的幾何圖形;如三角形、多邊形、五角星等等。
1) 矩形
說明:預設情況下,:befor :after 偽元素的border邊框屬性與其他HTML元素一樣。
CSS:
div::before { width: 0px; height: 0px; content: ''; position: absolute; border-top: 50px solid #f50000; border-right: 50px solid #6cc361; border-bottom: 50px solid #6167c3; border-left: 50px solid #fa00d9; }
效果:
2) 三角形
說明:顯示某一方位的border,並隱藏左右2邊的border(背景設定為透明),可讓偽元素顯示三角形的形狀。
示例:
3. 擴充套件閱讀
相關推薦
CSS :befor :after 偽元素的妙用
本篇重點介紹CSS中的:befor、:after建立的偽元素幾種使用場景,如填充文字、作為iconfont、進度線、時間線以及幾何圖形。 1. 介紹 1.1 說明 CSS中的:befor、:after都會建立一個偽元素,其中:befor建立的偽元素是所選元素的第一個子元素,:after建立的偽元素是
select 下拉列表選擇框效果及美化(before 和 after偽元素的妙用)
color dem cti relative ccs ota otto center round 參考博客:https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766
select 下拉列表選擇框效果及美化(before 和 after偽元素的妙用)
參考部落格:https://github.com/chokcoco http://www.cnblogs.com/libin-1/p/5766729.html http://www.cnblogs.com/coco1s/p/5667853.html http://sbco.cc/magicCss/
css before和after偽元素應用
pan clear play set tle ear ani tab title 1、說明 ":before" 偽元素可以在元素的內容前面插入新內容。 ":after" 偽元素可以在元素的內容之後插入新內容。 2、兼容性 偽元素有2種寫法,單冒號和雙冒號,單冒號和雙
使用::befor和::after偽元素在網站中添加圖標
不同 round ont 特殊 dom class code 修飾 utf-8 css3為了區分偽類和偽元素,偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::first-lette
CSS中的before和:after偽元素深入理解
1、定義: “偽元素”,顧名思義。就是它建立了一個虛假的元素,並且將其虛假的元素插入到目標元素的內容之前或之後。 2:特點: a、它在實際文件中不改變什麼,但是對使用者可見,可以通過css控制,原始碼中看不到 b、偽元素如果沒有設定“content”屬性,偽元素是無用的。 你可以設定content屬
使用::befor和::after偽元素在網站中新增圖示
css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::af
css中的偽元素和偽類的區別
在使用css的時候經常分不清哪些是偽類,哪些是偽元素。可能知道怎麼用,但概念分不清。 今天想到這個問題了就自己總結了一下,方便以後檢視。 首先談談什麼是偽元素:偽元素不是實際存在的頁面元素,但是其用法和表現行為與真正的頁面元素是一樣的,可以對其使用諸如頁面一樣的css樣式。他的實質是css樣
::before和::after偽元素的用法
一、介紹 css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::first-letter,::first-line,::before,::after,:
::before和::after偽元素
偽元素的意思就是,元素不是在DOM中生成的,而是在瀏覽器渲染CSS的時候畫上去的,所以在瀏覽器檢視元素上是看不到偽元素的HTML結構的。 before 和 after 顧名思義就是附著在元素前後的偽元素。 預設情況下偽元素是行內顯示的,想讓它呈現出不同的效果的話,就需要設定它為塊 {display:blo
js設定before和after偽元素效果的方法總結
我們知道,我們無法直接給before和after偽元素設定js效果例子說明 現在需要為(id為box,內容為"我是測試內容"的div)新增(:before內容為"字首",顏色為紅色的偽元素)<!DOCTYPE html> <html> <he
web前端經典教程之偽類妙用
今天我想說一下偽類當中的:before和:after, 這兩位仁兄一前一後的作用,真是不容小覷哈,除了常見的清除浮動,還可以做一些邊角動畫,後面還發現配合display還可以非常神奇的佈局,尤其是解決解析度多樣的移動端定位問題,非常有效,用得好就不用JavaScript來
CSS3 before、after偽元素實現氣泡框
氣泡框的原理其實也就是普通邊框+三角形,CSS實現三角形也是利用了border屬性 1、三角形是實心的 html程式碼: <div class="wrap"></div> css程式碼: .wrap{
轉::before和::after偽元素的用法
絕對定位 又能 lec net ren effect form amp right 一、介紹 css3為了區分偽類和偽元素,偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::firs
動態改變偽元素樣式的方(用:after和:before生成的元素)
query 何事 play 意思 size 動態改變 用法 HR 一起 自己查資料總結的兩種方法 一、純css改變 a:hover:before{left:-20%;} a:hover:after{right:-20%;} a:before{ left:-100%
CSS偽元素:before/CSS偽元素:before/:after content 顯示Font Awesome字型圖示:after content 顯示Font Awesome字型圖示
HTML <a href="javascript:volid(0);"><i class="icon-table"></i>表格</a> CSS input[type="radio"]:checked + label:before {
css偽元素 ::after ::before
我遇到的問題: div盒子標籤設定了偽元素 ::after ::before 並給這倆content內容設定了空屬性,添加了背景圖,發現這兩個偽元素沒有寬度和高度。 解決方法 給設定偽元素的盒子的父級盒子新增position:relative;widt
學習筆記---css中偽元素與偽類(迷惑我的:after與:hover)
一直被偽類與偽元素所迷惑,以為是同一個屬性名稱,這兩天看css動畫,越來越多的看到諸如 a:hover:after,a.hover:after 的用法,越來越糊塗,索性翻翻定義研究研究。 本文出現的偽類偽元素均為css2、css1中內容。css3中偽類、偽元素還未做
CSS偽元素選擇器:before與:after
在css標籤中有這樣子的標籤div:before、div:after,對於before、after來說有部分人是相當陌生的,那麼這兩個標籤是什麼呢?有什麼用處? :befor、:after是CSS的偽元素,用CSS手冊可以查詢到其基本的用法:
css的偽元素::after和::before的使用
::after是一個CSS偽元素,使用::after,你可以從CSS裡往頁面上新增內容。雖然最終生成的東西並不是真正的DOM裡的內容,但這些內容能像普通內容一樣顯示,基本下的效果是這樣的: CSS程式碼 div::after{ content:"你好"; } HTML程式碼