Probleme mit :before und :after

[bobby]

Moin,

Hallo bobby,

kannst du ein ausführbares Beispiel generieren?

Siehe meinem Code. Ich habs nur offline. mehr hab ich nicht dazu. Es scheint so, dass before sich am absolute positionierten DIV ausrichtet und after am zwieten a. Sorry, mehr Code habe ich auch nicht.

ich hab mal das SASS über sassmeister.com compilieren lassen

header nav ul {
  position: relative;
  list-style-type: none;
  top: 51px;
}
header nav ul li {
  list-style-image: none;
  display: inline-block;
  margin-left: 30px;
  margin-right: 30px;
  height: 60px;
}
header nav ul li:hover > ul {
  position: absolute;
  top: 40px;
  display: block;
  margin: 0;
  padding: 0;
}
header nav ul li > a:first-child {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: black;
  text-transform: uppercase;
}
header nav ul li > a:first-child:hover {
  text-decoration: none;
}
header nav ul li > a:first-child:hover + a:after {
  content: "";
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  background: black;
}
header nav ul li a.submenubutton:last-child {
  display: none;
}
header nav ul li > ul {
  position: absolute;
  left: 0;
  width: 100%;
  display: none;
  background: black;
  color: white;
}
header nav ul li > ul:hover {
  display: block;
}
header nav ul li > ul:hover:before {
  content: "";
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  background: black;
}
header nav ul li > ul li {
  list-style-image: none;
  display: inline-block;
  margin-left: 30px;
  margin-right: 30px;
}

wie gesagt. ums nav noch ein header-Element. mehr habe ich auch nicht!

Aßerdem hab ich ein JSFiddle erzeugt

da sieht man den Effekt sehr gut

Gruß Bobby