Question

看来前后选择器用于创建3个span元素。

令人困惑的部分是html中只有一个实际的跨度。其他2个跨度是如何实际创建的。

这是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

虽然您在Html中提到了一个，但您在CSS中添加了：before和：after。

因此，通过CSS添加其他2行（之前和之后）。 with：before和：after

Pseudo element（：before），允许您从CSS插入内容到页面上（不需要在HTML中）

有关详细信息，请参阅此处：https://css-tricks.com/almanac/selectors/a/after-and-before/

--------------------------更多关于此事------------------ -------

插入的内容在页面的源中不可见。它只在CSS中可见。此外，insert元素默认为内联元素（或者，在HTML5术语中，在文本级语义的类别中）。因此，要为插入的元素提供高度，填充，边距等，您通常必须将其明确定义为块级元素。

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

Answer 2

实际上，HTML和DOM中只有一个范围。但是：在和之后：之前用css创建伪元素。

但你的小提琴的css有一些没有多大意义的东西：

班级“。mobile_menu_icon span”和“。mobile_menu_icon”获取相同的元素。
选择器“。mobile_menu_icon span：before”和“。mobile_menu_icon span：在”重复之后。

我已经创建了一个简化你的例子的小提琴： 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/

Answer 3

检查firbug中的元素，您将看到:after :before的伪类，它们负责创建另外两行。您可以在此处阅读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;
}

底部线由

创建

.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

:after和:before创建pseduo元素，这些元素是目标元素的子元素。

它们是由CSS创建的，并且以这种方式是唯一的。

您应该能够在父元素下的DOM中看到它们:after和:before。

如何使用CSS创建此菜单图标？

4 个答案: