這個菜單圖標是如何用CSS創建的？

Question

看來，選擇器之前和之後用於創建3個跨度元素。

令人困惑的部分是，html中只有一個實際的跨度。另外兩個跨度是如何創建的。

這是HTML/CSS。

HTML

<a class='mobile_menu_icon'> 
    <span></span> 
</a> 

CSS

.mobile_menu_icon span { 
    position: absolute; 
    display: block; 
    width: 32px; 
    height: 4px; 
    background-color: #000000; 
} 
.mobile_menu_icon { 
    position: relative; 
    top: 10px; 
    display: block; 
    height: 32px; 
    width: 32px; 
} 

.mobile_menu_icon span:before { 
    -webkit-transform: translateY(-250%); 
    transform: translateY(-250%); 
} 
.mobile_menu_icon span:before { 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s; 
    top: 0; 
} 
.mobile_menu_icon span:after { 
    -webkit-transform: translateY(250%); 
    transform: translateY(250%); 
} 
.mobile_menu_icon span:after { 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s; 
    top: 0; 
} 

Answer 1

:after和:before創建pseduo元素這是有針對性的孩子元件。

它們是由CSS創建的，並且以這種方式是唯一的。

您應該可以在其父元素下的DOM中看到它們，如:after和:before。

Answer 2

雖然你有一個在HTML中提到的，你已經添加：前：在你的CSS後。

所以，其他2行（之前和之後）通過CSS添加。用：前和：後

僞元素（：之前），它允許你插入內容到從CSS頁面（無需重寫是在HTML）

請參閱本作的詳細信息：https://css-tricks.com/almanac/selectors/a/after-and-before/

--------------------------更多內容------------------- ------

插入的內容在頁面的源代碼中不可見。它僅在CSS中可見。 另外，插入的元素默認爲內聯元素（或者，在HTML5中，屬於文本級語義類別）。因此，要給插入的元素一個高度，填充，邊距等，通常必須將其明確定義爲塊級元素。

參見本：http://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/#characteristics-of-inserted-content

Answer 3

在firbug檢查元素，你會看到僞類，它是:after :before這是負責創建其他兩個lines.you可以在這裏閱讀pseudo classess 頂線由

創建

.mobile_menu_icon span:before { 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s; 
    top: 0; 
} 

的bottome線由

.mobile_menu_icon span:after { 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
    -webkit-transition: -webkit-transform 0.3s; 
    transition: transform 0.3s; 
    top: 0; 
} 

Answer 4

在FAC創建t在HTML和DOM中只有一個範圍。但是：在和之後：在之前通過css創建僞元素。

但是你撥弄的CSS有一些事情，沒有多大意義：

• 類「.mobile_menu_icon跨度」和「.mobile_menu_icon」得到相同的元素。
• 和選擇器「.mobile_menu_icon跨度：之前」和「.mobile_menu_icon跨度：」「之後重複。

我已經創建了小提琴的叉子您的示例的簡化： http://jsfiddle.net/rk52ke5q/2/

.mobile_menu_icon span { 
    display: block; 
    width: 32px; 
    height: 4px; 
    background-color: #000000; 
    position: relative; 
    top: 10px; 
} 

.mobile_menu_icon span:before { 
    transform: translateY(-250%); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
} 

.mobile_menu_icon span:after { 
    transform: translateY(250%); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    content: ''; 
} 

注意，之後選擇具有

width: 100%; 
height: 100%; 

之前這意味着他們將具有完全相同的「真實」元素（跨度）大小。最後一招是

transform: translateY(250%); 

這會將您的「僞跨度」向下移動。

如果添加了「懸停」在選擇，你會看到當你通過鼠標魔術發生通過「真正的」跨度：http://jsfiddle.net/pnt7uez1/1/