2. 程式人生 > >before和after的用法

before和after的用法

阿新 • • 發佈：2019-01-11

一、介紹

css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。(:before和:after是在CSS2中提出來的，CSS3中的寫法是::before和::after)

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部新增內容。

這些新增不會出現在DOM中，不會改變文件內容，不可複製，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容，儘量使用它們顯示修飾性內容，例如圖示。

舉例：網站有些聯絡電話，希望在它們前加一個icon☎，就可以使用:before偽元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

Note:

1、這些特殊字元的html，js和css的寫法是不同的，如下

⇠  箭頭類

符號UNICODE符號UNICODE
HTMLJSCSSHTMLJSCSS
⇠&#8672\u21E0\21E0⇢&#8674\u21E2\21E2
⇡&#8673\u21E1\21E1⇣&#8675\u21E3\21E3
↞&#8606\u219E\219E↠&#8608\u21A0\21A0
↟&#8607\u219F\219F↡&#8609\u21A1\21A1
←&#8592\u2190\2190→&#8594\u2192\2192
↑&#8593\u2191\2191↓&#8595\u2193\2193
↔&#8596\u2194\2194↕&#8597\u2195\2195
⇄&#8644\u21C4\21C4⇅&#8645\u21C5\21C5
↢&#8610\u21A2\21A2↣&#8611\u21A3\21A3
⇞&#8670\u21DE\21DE⇟&#8671\u21DF\21DF
↫&#8619\u21AB\21AB↬&#8620\u21AC\21AC
⇜&#8668\u21DC\21DC⇝&#8669\u21DD\21DD
↚&#8602\u219A\219A↛&#8603\u219B\219B
↮&#8622\u21AE\21AE↭&#8621\u21AD\21AD
⇦&#8678\u21E6\21E6⇨&#8680\u21E8\21E8
⇧&#8679\u21E7\21E7⇩&#8681\u21E9\21E9
▲&#9650\u25B2\25B2►&#9658\u25BA\25BA
▼&#9660\u25BC\25BC◄&#9668\u25C4\25C4
➔&#10132\u2794\2794➙&#10137\u2799\2799
➨&#10152\u27A8\27A8➲&#10162\u27B2\27B2
➜&#10140\u279C\279C➞&#10142\u279E\279E
➟&#10143\u279F\279F➠&#10144\u27A0\27A0
➤&#10148\u27A4\27A4➥&#10149\u27A5\27A5
➦&#10150\u27A6\27A6➧&#10151\u27A7\27A7
➵&#10165\u27B5\27B5➸&#10168\u27B8\27B8
➼&#10172\u27BC\27BC➽&#10173\u27BD\27BD
➺&#10170\u27BA\27BA➳&#10163\u27B3\27B3
↷&#8631\u21B7\21B7↶&#8630\u21B6\21B6
↻&#8635\u21BB\21BB↺&#8634\u21BA\21BA
↵&#8629\u21B5\21B5↯&#8623\u21AF\21AF
➾&#10174\u27BE\27BE

❤  基本形狀類

符號UNICODE符號UNICODE
HTMLJSCSSHTMLJSCSS
❤&#10084\u2764\2764✈&#9992\u2708\2708
★&#9733\u2605\2605✦&#10022\u2726\2726
☀&#9728\u2600\2600◆&#9670\u25C6\25C6
◈&#9672\u25C8\25C8▣&#9635\u25A3\25A3
☻&#9787\u263B\263B☺&#9786\u263A\263A
☹&#9785\u2639\2639✉&#9993\u2709\2709
☎&#9742\u260E\260E☏&#9743\u260F\260F
✆&#9990\u2706\2706�&#65533\uFFFD\FFFD
☁&#9729\u2601\2601☂&#9730\u2602\2602
❄&#10052\u2744\2744☃&#9731\u2603\2603
❈&#10056\u2748\2748✿&#10047\u273F\273F
❀&#10048\u2740\2740❁&#10049\u2741\2741
☘&#9752\u2618\2618❦&#10086\u2766\2766
☕&#9749\u9749\9749❂&#10050\u2742\2742
☥&#9765\u2625\2625☮&#9774\u262E\262E
☯&#9775\u262F\262F☪&#9770\u262A\262A
☤&#9764\u2624\2624✄&#9988\u2704\2704
✂&#9986\u2702\2702☸&#9784\u2638\2638
⚓&#9875\u2693\2693☣&#9763\u2623\2623
⚠&#9888\u26A0\26A0⚡&#9889\u26A1\26A1
☢&#9762\u2622\2622♻&#9851\u267B\267B
♿&#9855\u267F\267F☠&#9760\u2620\2620

¥  貨幣類

符號UNICODE符號UNICODE
HTMLJSCSSHTMLJSCSS
$&#36\u0024\0024¢&#162\u00A2\00A2
£&#163\u00A3\00A3¤&#164\u00A4\00A4
€&#8364\u20AC\20AC¥&#165\u00A5\00A5
₱&#8369\u20B1\20B1₹&#8377\u20B9\20B9

½  數學類

符號UNICODE符號UNICODE
HTMLJSCSSHTMLJSCSS
½&#189\u00BD\00BD¼&#188\u00BC\00BC
¾&#190\u00BE\00BE⅓&#8531\u2153\2153
⅔&#8532\u2154\2154⅛&#8539\u215B\215B
⅜&#8540\u215C\215C⅝&#8541\u215D\215D
‰&#8240\u2030\2030%&#37\u0025\0025
<&#60\u003C\003C>&#62\u003E\003E

♫  音樂符號類

符號UNICODE符號UNICODE
HTMLJSCSSHTMLJSCSS
♩&#9833\u2669\2669♪&#9834\u266A

相關推薦

::before和::after偽元素的用法

一、介紹 css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::first-letter,::first-line,::before,::after,:

::before和::after的用法 css偽元素

CSS 有兩個說不上常用的偽類 :before 和 :after，偶爾會被人用來新增些自定義格式什麼的，但是它們的功用不僅於此。前幾天發現了 Creative Link Effects 這個非常有意思的介紹創意連結特效的頁面，裡面驚人的效果大量使用到的特性除了 trans

before和after的用法

一、介紹css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。(:before和:after是在CSS2中提出來的，CSS3中的寫法是::before和::after)常見偽類——:hover,:link,:active,:target,:not(),:focus。常見偽元素—

轉::before和::after偽元素的用法

絕對定位 又能 lec net ren effect form amp right 一、介紹 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::firs

mysql之觸發器before和after的區別

mysql 訂單 負數 values 完成 -1 class 大於 nbsp 我們先做個測試： 接上篇日誌建的商品表g和訂單表o和觸發器 假設：假設商品表有商品1，數量是10； 我們往訂單表插入一條記錄： insert into o(gid,much) value

css before和after偽元素應用

pan clear play set tle ear ani tab title 1、說明 ":before" 偽元素可以在元素的內容前面插入新內容。 ":after" 偽元素可以在元素的內容之後插入新內容。 2、兼容性 偽元素有2種寫法，單冒號和雙冒號，單冒號和雙

jquery中append、prepend, before和after方法的區別（一）

mod serve com oos 兄弟節點 sha pos 插入 5% 原文：http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 與 prepend()是在元素內插

css中before和after的應用實例

padding meta script cli fff radi tag lock style <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

::before和::after偽元素

偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染CSS的時候畫上去的，所以在瀏覽器檢視元素上是看不到偽元素的HTML結構的。 before 和 after 顧名思義就是附著在元素前後的偽元素。 預設情況下偽元素是行內顯示的，想讓它呈現出不同的效果的話，就需要設定它為塊 {display:blo

深入學習jquery原始碼之before()和after()

深入學習jquery原始碼之before()和after() after(content|fn) 概述 在每個匹配的元素之後插入內容。 引數 content String, Element, jQuery 插入到每個目標後的內容 function Fu

CSS中的before和:after偽元素深入理解

1、定義： “偽元素”，顧名思義。就是它建立了一個虛假的元素，並且將其虛假的元素插入到目標元素的內容之前或之後。 2：特點： a、它在實際文件中不改變什麼，但是對使用者可見，可以通過css控制，原始碼中看不到 b、偽元素如果沒有設定“content”屬性，偽元素是無用的。 你可以設定content屬

js設定before和after偽元素效果的方法總結

我們知道，我們無法直接給before和after偽元素設定js效果例子說明 現在需要為(id為box,內容為"我是測試內容"的div)新增(:before內容為"字首"，顏色為紅色的偽元素)<!DOCTYPE html> <html> <he

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/

IE67不相容before和after偽類的最佳解決辦法

IE67不相容before和after偽類，在需要相容IE67的頁面時，可以通過使用img標籤和png雪碧圖固定定位的方式來解決，通過js來處理IE6下PNG不透明的問題，這樣就可以不用通過JS處理before和aft

css中before和:after使用

1.什麼是:before和:after？ 該如何使用他們？:before是css中的一種偽元素，可用於在某個元素之前插入某些內容。:after是css中的一種偽元素，可用於在某個元素之後插入某些內容

【jQuery】使用before()和after()在元素前後插入內容

使用before()和after()方法可以在元素的前後插入內容，它們分別表示在整個元素的前面和後面插入指定的元素或內容，呼叫格式分別為： $(selector).before(content)和

jquery中append、prepend, before和after方法的區別（二）

1.append()與after() 這兩個都是在元素的後面插入內容，不同的是前者是在元素內部插入（作為該元素的子元素），後者是在元素外部插入（作為該元素的兄弟元素）；但是這裡我要講的是，當用表單驗證中用到這兩個方法時的區別：append（）比較正常；而after（）則會沒

觸發器（二、BEFORE和AFTER的區別及使用場景）

DML操作的行級觸發器，分為before和after兩類。比如下面在同一張表上分別建了2個觸發器然後用一個insert語句進行觸發結果發現，這2類觸發器捕捉的:OLD和:NEW資料實際是一樣的。那麼什麼時候用before，什麼時候用after呢？我們先要知道這2種觸發器的特性

:before 和 :after 的內幕 以及偽類

偽類 VS 偽元素 這兩個概念很容易混淆，即使你Google或者查W3C的資料都不一定搞得清。答案其實很簡單，如下： 偽類：作用物件是整個元素 首先，來看幾個偽類 ? a:link {color:#111}