Probleme mit :before und :after

[bobby]

Moin,

irgendwie habe ich gerade ein Verständnisproblem

ich hab folgende Struktur im HTML

 <nav>
   <ul>
     <li>
       <a href="#">Unternehmen</a>
       <a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" /></a>
       <ul>
         <li>
           test
         </li>
       </ul>
     </li>
   </ul>
 </nav>

dazu folgendes Sass

header nav ul
  position: relative
  list-style-type: none
  top: 51px

  li
    list-style-image: none
    display: inline-block
    margin-left: 30px
    margin-right: 30px
    height: 60px

    &:hover > ul
      position: absolute
      top: 40px
      display: block
      margin: 0
      padding: 0

    & > a:first-child
      font-size: 14px
      font-weight: 700
      letter-spacing: 0.15em
      color: $black
      text-transform: uppercase
      
      &:hover
        text-decoration: none

        & + a:after
          content: ""
          position: relative
          //bottom: 4px
          display: block
          height: 2px
          width: 100%
          // margin: 10px
          //left: 0
          background: $black

    a.submenubutton:last-child
      display: none

    & > ul
      position: absolute
      left: 0
      width: 100%
      display: none
      background: rgb(0,0,0)
      color: white

      &:hover
        display: block
        
        &:before
          content: ""
          position: relative
          // bottom: 4px
          display: block
          height: 2px
          width: 100%
          //margin: 10px
          //left: 0
          background: $black
          

      li
        list-style-image: none
        display: inline-block
        margin-left: 30px
        margin-right: 30px

das Problem ist, das beim Content :after (& + a:after => header ul li a:first-child:hover + a:after ) der Content korrekt in den Grenzen des LI angezeigt wird (da ja position: relative)

aber beim :before (&.before => header nav ul li > ul:hover:before) wird der content nicht in den Grenzen des LI angezeigt, sondern geht darüber hinaus, obwohl auch position relative.

After und before wird GENAU an der gleichen stelle eingefügt.

wo liegt das Problem? was habe ich falsch verstanden?

Gruß Bobby

[Matthias Apsel]

Hallo bobby,

kannst du ein ausführbares Beispiel generieren?

Bis demnächst
Matthias

[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

[Gunnar Bittersmann]

@@bobby

wo liegt das Problem?

Beim fehlenden Online-Beispiel.

LLAP 🖖

[bobby]

Moin,

Beim fehlenden Online-Beispiel.

ich habe kein eigentliches Online-Beispiel. ABER:

jsfiddle

da sieht man den Effekt sehr gut

Gruß Bobby

[bobby]

Moin,

Da ich weiterkommen musste, habe ich es anders gelöst. ich habe in jedem Menüpunkt ein Div als Element mit den Eigenschaften des before und After Elementes eingefügt und lasse dieses bei Hover einfach einblenden. Das funktioniert hervorragend und ich umgehe das Problem mit before und after...

ich wäre trotzdem an einer Erklärung des problemes interessiert

Gruß Bobby

[Rolf b]

Wenn ich dich richtig verstanden habe, liegt das Problem darin, dass du "position:relative" auf das ul gesetzt hast und nicht auf das li. Deshalb wurde das Submenü relativ zum UL positioniert und nicht relativ zum li, und das UL hat offenbar die komplette Breite des Fensters.

Gruß Rolf

[bobby]

Moin,

Wenn ich dich richtig verstanden habe, liegt das Problem darin, dass du "position:relative" auf das ul gesetzt hast und nicht auf das li. Deshalb wurde das Submenü relativ zum UL positioniert und nicht relativ zum li, und das UL hat offenbar die komplette Breite des Fensters.

und das ist genau so gewollt... Das Submenu soll als zeile unter dem Hauptmenu eingeblendet werden.

Gruß Bobby

[Rolf b]

und das ist genau so gewollt... Das Submenu soll als zeile unter dem Hauptmenu eingeblendet werden.

Ja, klar.

Aber wenn ich dich richtig verstanden habe, dann besteht Dein Problem darin, dass das Submenü genauso breit sein soll wie der Menüpunkt, zu dem es gehört, und nicht so breit wie das ganze Menü - sprich fensterbreit. Richtig? Und das liegt daran, dass der position:relative Style am ul Tag des Hauptmenüs steckt und nicht an den li Tags des Hauptmenüs.

Gruß Rolf

[bobby]

Moin,

Aber wenn ich dich richtig verstanden habe, dann besteht Dein Problem darin, dass das Submenü genauso breit sein soll wie der Menüpunkt, zu dem es gehört, und nicht so breit wie das ganze Menü - sprich fensterbreit. Richtig? Und das liegt daran, dass der position:relative Style am ul Tag des Hauptmenüs steckt und nicht an den li Tags des Hauptmenüs.

Ne. Das hast du falsch verstanden... Hauptmenü und submenu verhalten sich richtig. Es ist eine kleine Linie dazwischen, die so breit sein soll wie der hauptmenüpunkt. Die habe ich bei hover über den Hauptpunkt mit :After erzeugt und bei hover über das submenu mit :before. Leider reagiert dies verschieden, obwohl es m.E. an der selben Stelle eingefügt wird. Siehe mein jsfiddle Beispiel

Gruß Bobby

[Matthias Apsel]

Hallo bobby,

Ne. Das hast du falsch verstanden... Hauptmenü und submenu verhalten sich richtig. Es ist eine kleine Linie dazwischen, die so breit sein soll wie der hauptmenüpunkt. Die habe ich bei hover über den Hauptpunkt mit :After erzeugt und bei hover über das submenu mit :before. Leider reagiert dies verschieden, obwohl es m.E. an der selben Stelle eingefügt wird. Siehe mein jsfiddle Beispiel

Deine Struktur ist folgende:

<li>
	<a href="#">Unternehmen</a>
	<a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" /></a>
	<ul>
		<li>test</li>
	</ul>
</li>

Deine Pseudolemente werden im Prinzip so eingefügt

<li>
	<a href="#">Unternehmen</a>
	<a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" />
		after-pseudoelement des Links
	</a>
	<ul>
		before-pseudoelement der Liste
		<li>test</li>
	</ul>
</li>

Bis demnächst
Matthias