bobby: Probleme mit :before und :after

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

--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  1. Hallo bobby,

    kannst du ein ausführbares Beispiel generieren?

    Bis demnächst
    Matthias

    --
    Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
    1. 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

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  2. @@bobby

    wo liegt das Problem?

    Beim fehlenden Online-Beispiel.

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. Moin,

      Beim fehlenden Online-Beispiel.

      ich habe kein eigentliches Online-Beispiel. ABER:

      jsfiddle

      da sieht man den Effekt sehr gut

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  3. 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

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. 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

      1. 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

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        1. 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

          1. 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

            --
            -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            1. 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

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.