學習before和after僞元素

時間 2019-11-26

標籤學習元素简体版

原文原文鏈接

參考：http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.htmlcss

僞元素在文檔中不實際改變什麼，可是能插入css中，對用戶可見，可經過除css控制。　　html

基本語法：css3

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

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

在內容模塊中，僞元素若是沒有設置content屬性，僞元素是無效的；瀏覽器

單冒號跟雙冒號區別：僞元素（雙冒號），css3中僞類（單冒號）；函數

能夠設置content內容爲空，當作一個無內容的盒子：spa

#example{
content:"";
display:block;
width:100px;
height:100px;
}

就語法而言，能夠廣泛應用僞元素，不用放在特殊元素上：示例代碼：code

:before{
content:"#";
}

雖然有效，可是沒用，代碼會在DOM每一個元素內容前插入符號，即便刪除了body標籤和他全部的內容，仍會在頁面上顯示：一個在<html>裏，另外一個在<body>標籤裏。瀏覽器會自動建立；htm

插入的元素在默認狀況下是內聯元素，爲了給它賦予高度，填充，邊距，經常顯示的定義它是一個塊級元素；blog

可插入非文本內容:element

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

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

也能夠用這個函數去獲取元素的title屬性，或者甚至是microdata的值。固然，並非全部的例子都符合本身的實際，但根據不一樣的狀況，一個特定的屬性值做爲一個僞元素能夠是實際的；然而，獲取title或者圖像的alt的值並做爲實際的僞元素顯示在頁面上是不可能的。

記住僞元素必須是被應用元素的子元素。圖像，這是void(或者是空元素)，沒有子元素，因此它在這個列子中不可用，一樣也適用於其餘空元素，例如：<input>。

僞元素不會出如今DOM中，這些元素不是真正的元素，所以他們不可用，不要用僞元素生成內容，是網頁可用性和可訪問性的關鍵。

注入的元素是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的前或後，因此不是插入到此元素內部，而是被置於它的前或後。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。