Question

我有一个汉堡包导航器，它的顶部和底部条形图是通过伪选择器之前/之后生成的。尝试将其置于父元素中时会发生此问题。虽然伪选择器居中原始div元素不是。

HTML

<a class="nav-container" href="##">
  <div class="hamburger"></div>
</a>

CSS

html {
 text-align: center;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-container {
  display: inline-block;
  padding: 20px 0;
}

.hamburger {
  background: black;  
  display: inline-block;
  position: relative;  
  height: 5px;
  width: 30px;
}
.hamburger:before {
  background: #000;  
  content: '';
  position: absolute;
  top: -10px;
  width: 30px;
  height: 5px;
}
.hamburger:after {
  background: #000;  
  content: '';
  position: absolute;
  top: 10px;
  width: 30px;
  height: 5px;
}

http://jsfiddle.net/ht1d7y9f/

Answer 1

实际上，我认为伪元素是不合适的。

.hamburger:before {
  background: #000;
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 30px;
  height: 5px;
}
.hamburger:after {
  background: #000;
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 30px;
  height: 5px;
}

＆＃13;

html {
  text-align: center;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-container {
  display: inline-block;
  padding: 20px 0;
  text-align: center;
  border: 1px solid green;
}
.hamburger {
  background: black;
  position: relative;
  height: 5px;
  width: 30px;
}
.hamburger:before {
  background: #000;
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 30px;
  height: 5px;
}
.hamburger:after {
  background: #000;
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 30px;
  height: 5px;
}

＆＃13;

<a class="nav-container" href="##">
  <div class="hamburger"></div>
</a>

＆＃13;

将一个汉堡包导航中心设置为伪选择前/后

1 个答案: