将带有伪 before/after 选择器样式的汉堡包导航居中

Question

我有一个汉堡包导航，它的顶部和底部栏是通过伪 before/after 选择器生成的。尝试将其居中放置在父元素中时会出现此问题。尽管伪选择器将原始 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;
}

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;
}

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

将带有伪 before/after 选择器样式的汉堡包导航居中

Centering a hamburger nav styled with pseudo before/after selectors

html

css

pseudo-element