關於僞類元素:before和:after

時間  2019-11-20
標籤 關於 元素 简体版
原文   原文鏈接

實現氣泡效果css

首先定義一個html

<p class="speech"></p>

 

先給外層的容器添加樣式：web

複製代碼 
p.speech
{
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
複製代碼

 

沒有什麼特別複雜的，主要的核心就在postion:relative，用來定位對話浮層的。咱們還須要一些Mozilla和webkit的屬性來完成圓角和陰影，IE8如下的瀏覽器看不到這些屬性，只是顯示一個框，不影響整體的效果。瀏覽器

咱們如今須要建立對話浮層下面的那個三角形的指向標誌了。不使用圖片，咱們使用CSS邊框來完成這個效果。看看下面這個用不一樣顏色邊框完成的效果。函數

咱們把高度和寬度減小到0px，而後給邊框使用不一樣的大小，看看效果：post

爲了最後能作成指示標誌的樣子，咱們把上邊距和左邊距設置爲solid，下邊距和右邊距設置爲透明：測試

可是咱們把這個放哪呢？還好，咱們可使用CSS的僞類:before和:after來生成，因此：字體

複製代碼 
p.speech:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100px;
border: 25px solid;
border-color: #666 transparent transparent #666;
}
複製代碼

 

如今三角形的標識就定位在咱們的氣泡下面了。另外，不要費事去考慮這個元素的陰影，他會定位在透明邊界的旁邊，而不是看到的圖形的旁邊。url

咱們還須要移除三角形的一部分。咱們能夠在裏面放置一個白色的小三角形來達到這個效果。spa

複製代碼 
p.speech:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
複製代碼

 

咱們的不使用圖片的對話氣泡就完成了：

 

另外，咱們還可使用:before和:after僞類來作不少其餘的事情，好比，一個思考氣泡也能夠經過這樣辦法完成：

首先也是建一個

 

 
 
<p class="thought">I think...</p>
 

 

 

css代碼：
 

 
 
 
  複製代碼 
 
 
 
p.thought{
position: relative;
width: 130px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 58px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}


p.thought:before, p.thought:after{
content: '';
position: absolute;
left: 10px;
top: 70px;
width: 40px;
height: 40px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
z-index:5;
}

p.thought:after{
position: absolute;
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
z-index:6;
}
 
 
 
  複製代碼 
 
 

 

最新實現效果：
 

 

CSS中有一個特性容許咱們添加額外元素而不擾亂文檔自己，它們是以CSS選擇器的形式出現的，具備標籤的表現效果，可是呢又不是真正的標籤元素，因此叫作「僞元素」。下面就說一下常見的兩個僞元素before和after。
 

 
 

1、僞元素基本用法
 

 
 

     在CSS選擇器中加上相應僞類選擇符就能夠了，像這樣：#example: before或者#example: after，這裏是使用ID選擇器，好比下面的CSS代碼：
 

 
 
#example:before {
  content: "\"";
}
#example:after {
  content: "\"";
}
 

 

 
 

它的效果就是爲example標籤先後加上雙引號。
 

      和僞類的選擇符很像，可是有一點小區別，就是僞類選擇符其實是用兩個冒號，::before的形式，以和僞類區別開，可是隻用一個冒號瀏覽器也是能夠識別的，在CSS3中規定是一個冒號就能夠了。
 

      若是沒有綁定標籤，像這樣：:before{ content:」=」;} 這樣的僞元素是沒有意義的,代碼會在DOM裏的每一個元素的內容以前插入散列符號。即便你刪除了<body>標籤和它的全部內容，你仍會在頁面上看見兩個散列符號：一個在<html>裏，另外一個在<body>標籤裏。
 

      那麼可不能夠給僞元素再添加僞元素呢？好比下面這個代碼：
 

 
 
#example:after:after{
    content: "after";
}
 

 

 
 

      在瀏覽器中刷新，測試一下會發現什麼也沒有顯示，也就是說再給僞元素添加僞元素目前不少瀏覽器上是無效的，瀏覽器忽略掉該定義，只能識別一層僞元素，可是既然能夠僞元素添加僞元素，能夠期待再爲僞元素添加僞元素，其表現力是很強的。
 

2、僞元素屬性和樣式
 

1.content屬性
 

      每一個僞元素必需要有content屬性，不然的話瀏覽器不能識別，你能夠爲content屬性添加空引用做爲它的值(即:content:「」)。
 

      你也能夠爲content包含一個指向一個圖像的URL，就像在css裏包含一個背景圖像同樣：
 

 
 
p:before {

  content: url(image.jpg);
}
 

 

 
 

      也能夠包含一個Data URI代替圖像引用，就像使用css背景同樣。
 

      你還能夠選擇ATRR(X)中的函數的形式。「把X屬性的值以字符串的形式返回」，好比：
 

 
 
a:after {
  content: attr(href);
}
 

 

 
 

      attr()函數的功能是把獲得特定屬性的值並把它做爲插入的文本成爲一個僞元素。
 

      上面的代碼會致使頁面上的每個<a>元素的href值當即被放置在每一個各自的<a>元素的後面。在文檔被打印時，它能夠用做一個包含全部URl的打印樣式表。
 

2.標籤屬性
 

      僞元素也是元素，因此你能夠爲它添加大部分其餘元素具備的屬性，好比定位屬性，字體屬性，背景屬性和盒模型的屬性等，另外因爲僞元素默認是內聯元素，因此若是要使得盒模型中的height等屬性有效的話，必需要把它轉化爲塊元素，具體就是設置其display屬性爲block,或者設置爲float等。以下：
 

 
 
 
  複製代碼 
 
 
 
#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: "\"";
    width: 20px;
    height: 20px;
    background: #6F3;
}
 
 
 
  複製代碼 
 
 

 

      既然僞元素能夠定義position等屬性，那麼before和after的約束就頗有限了，before和after的區別只能是在沒有特殊定義僞元素的位置等信息的時候的默認行爲不一致，before出如今相對綁定的元素以前，而after出如今相對綁定的元素位置以後。
 

      另外既然能夠爲僞元素定義盒子模型的屬性，就不得不說，僞元素默認爲其目標元素的子元素，好比#example:after，僞元素after的父元素就是#example選擇符對應的元素，它具備通常子元素盒模型的特性，即爲他定義的height和width等屬性規則爲影響目標元素的規則。
 

3、僞元素的兼容性
 

基本能夠放心的使用僞元素，由於它有很好的兼容性，能夠不用加瀏覽器前綴而很好的使用它。
 

支持:before 和 :after 僞元素的瀏覽器有：
 

     
 
  • Chrome 2+,
    •  
 
  • Firefox 3.5+ (3.0 had partial support),
    •  
 
  • Safari 1.3+,
    •  
 
  • Opera 9.2+,
    •  
 
  • IE8+ (with some minor bugs),
    •  
 
  • 幾乎全部的移動瀏覽器。
    •  

 

      可是IE6和IE7上並不支持，若是不是很在乎他們的用戶數量的話，基本能夠很自由的使用啦。
 

4、僞元素的做用
 

     這裏借用Thoriq Firdaus的幾個例子簡單說一下僞元素的用法。另外僞元素既然是僞元素，那麼做爲結構與表現分離的一種實現，其做用應該是對文本起到很好的修飾做用，而不是把它用來表現文本。
 

陰影效果
 

使用 僞元素:before 和 :after 。它們兩個都是絕對定位，並且使用負z-index來放置到圖片後方實現陰影效果。
 

fascinating-shadows8
 

3D按鈕
 

利用僞元素結合CSS3 box-shadow 來繪製一個使人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。僞元素:before 被用來在按鈕的左側添加數字「1」。
 

3d-button9
 

疊加圖像效果
 

使用僞元素來僅僅依靠一個圖片標籤建立一個「凌亂的」疊加圖像效果也是可能的。僞元素用於創建一個圖片疊加的錯覺，經過使用z-index負值使「疊加」的圖片在真正的圖片後面來實現。
 

stacked-image10


        

            

        	





    

		

            
相關文章