2. 程式人生 > >轉::before和::after偽元素的用法

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

阿新 • • 發佈：2019-01-20
絕對定位 又能 lec net ren effect form amp right

一、介紹

css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。

常見偽類——: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:這些特殊字符的html，js和css的寫法是不同的，具體可查看html特殊字符的html，js，css寫法匯總。

二、content屬性

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，偽類元素的display是默認值inline，可以通過設置display:block來改變其顯示。

content可取以下值。

1、string

使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}

舉例：

技術分享圖片 
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>平凡的世界</p>
技術分享圖片

技術分享圖片

2、attr()

通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

技術分享圖片

3、url()/uri()

用於引用媒體文件。

舉例：“百度”前面給出一張圖片，後面給出href屬性。

技術分享圖片 
<style>
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}
a{
    text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>
技術分享圖片

效果：

技術分享圖片

4、counter()

調用計數器，可以不使用列表元素實現序號功能。

配合counter-increment和counter-reset屬性使用：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

代碼:

技術分享圖片 
<style>
body{
    counter-reset: section;
}
h1{
    counter-reset: subsection;
}
h1:before{
    counter-increment:section;
    content:counter(section) "、";
}
h2:before{
    counter-increment:subsection;
    content: counter(section) "." counter(subsection) "、";
}
</style>
------------------------------------------------
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
技術分享圖片

效果：

技術分享圖片

了解更多可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

三、使用

1、清除浮動

清除浮動方法有多種，現在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動清除浮動

技術分享圖片 
.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
技術分享圖片

2、模擬float:center的效果

float沒有center這個取值，但是可以通過偽類來模擬實現。

這個效果實現很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。

核心css如下：

技術分享圖片 
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
技術分享圖片

完整代碼如下：

技術分享圖片 View Code

技術分享圖片技術分享圖片

出自：https://css-tricks.com/float-center/

3、做出各種圖形效果

舉例：一個六角星

技術分享圖片 
<style>
#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six::after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>
技術分享圖片

#star-six的div是一個正三角行，#star-six::after是一個倒三角形，通過絕對定位，調整其位置即可實現六角星的效果。

技術分享圖片

點我查看更多。

4、不使用圖片創建小圖標

舉例：比如一個電話

很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。

技術分享圖片 
<style type="text/css">
    #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
    <div id="phone"></div>
</div>
技術分享圖片

技術分享圖片

更多圖標：

技術分享圖片 View Code

技術分享圖片

這個效果來自：http://www.w3cfuns.com/blog-5444604-5402127.html

有大神用偽元素創建了84種小圖標，具體可查看http://nicolasgallagher.com/pure-css-gui-icons/

5、顯示打印網頁的URL

技術分享圖片 
<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style><body>
<a href="http://www.baidu.com">百度</a>
</body>
技術分享圖片

技術分享圖片

6、給blockquote添加引號

經常用到給blockquote 引用段添加巨大的引號作為背景，可以用 ：:before 來代替 background 。好處是即可以給背景留下空間，還可以直接使用文字而非圖片：

技術分享圖片 
<meta charset="utf-8"/>
<style type="text/css">
    blockquote::before {
    content: open-quote;
    color: #ddd;
    z-index: -1;
    font-size:80px;
}
</style>
<blockquote>引用一個段落,雙引號用::before偽元素實現</blockquote>
技術分享圖片

技術分享圖片

7、超鏈接特效

舉例：配合 CSS定位實現一個鼠標移上去，超鏈接出現方括號的效果

技術分享圖片 
<meta charset="utf-8" />
<style type="text/css">
body{
    background-color: #425a6c;
}
    a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }
</style>
<a>鼠標移上去出現方括號</a>
技術分享圖片

技術分享圖片

更多創意鏈接特效可參考： Creative Link Effects 。

8、::before和::after實現多背景圖片

舉例：一個標簽應用5張背景圖

技術分享圖片 View Code

技術分享圖片

原效果來自：Multiple Backgrounds and Borders with CSS 2.1

這個效果看的真的是腦洞大開，雖然多背景圖用css3的background-image很容易就能實現。但是這篇文章是10年寫的，已經過去5年了，想想也正是他們這樣的嘗試和努力才加速了css3標準的制定，讓今天的開發更easy。今天的我們又能為5年後的開發人員做些什麽貢獻呢？

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4459991.html有問題歡迎與我討論，共同進步。

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

相關推薦

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

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

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

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

css before和after偽元素應用

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

::before和::after偽元素

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

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/

使用::befor和::after偽元素在網站中添加圖標

不同 round ont 特殊 dom class code 修飾 utf-8 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:hover,:link,:active,:target,:not(),:focus。 常見偽元素——::first-lette

CSS3 before、after偽元素實現氣泡框

氣泡框的原理其實也就是普通邊框+三角形，CSS實現三角形也是利用了border屬性 1、三角形是實心的 html程式碼： <div class="wrap"></div> css程式碼： .wrap{

使用::befor和::after偽元素在網站中新增圖示

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

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

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

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

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

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

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

:before，after和其他偽元素新增

div:nth-of-type(2)::before{ /*必須新增content屬性，否則後期不可見*/ content: ""; /*預設是行級元素，如果想設定寬高，就必須轉換為塊級元素*/ position: absolute; width: 20px; height

before和after的用法

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

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

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

mysql之觸發器before和after的區別

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

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"> <