这个菜单图标是如何用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/