locked
how can i replace current positioned element from this way to better way RRS feed

  • Question

  • User-1045082127 posted

    hi there . I was wrote a way to simulate a simple effect in our menu and my code is:

    <div id="first">
          <ul>
            <li><h5>a</h5></li>
            <li><h5>b</h5></li>
          </ul>
    </div>

    so my question is how can i remove left: -400%;  from #first ul li::before part and chose a better way instead of it:

    body{
      padding:0;
      margin: 0;
    }
    #first {
      ;
      border:1px solid gray;
      text-align: center;
      height: 100px;
    }
    #first ul {
      ;
      left: 40%;
    }
      #first ul li{
        ;
        display: inline-block;
        margin-right: 70px;
      }
    #first ul li::before{
      content: '';
      ;
      height: 100%;
      left: -400%;
      width: 60px;
      border-radius: 100%;
      background-color: red;
      z-index: -1;
    transform: scale(0);
      transition: all 0.3s;
    }
    #first ul li:hover::before{
      transform: scale(1);
    
    }
    

    tnx and regards

    Thursday, April 9, 2020 6:43 PM

Answers

  • User1535942433 posted

    Hi aminsoraya,

    Accroding to your description and codes,I suggest you could use margin-left.

    More details,you could refer to below codes:

     <style>
            body {
                padding: 0;
                margin: 0;
            }
    
            #first {
                ;
                border: 1px solid gray;
                text-align: center;
                height: 100px;
                
            }
    
                #first ul {
                    ;
                    left: 40%;
                }
                    #first ul li {
                        ;
                        display: inline-block;
                        margin-right: 70px;       
                    }
    
                        #first ul li::before {
                            content: '';
                            ;
                            height: 100%;
                            width: 60px;
                            border-radius: 100%;
                            background-color: red;
                            z-index: -1;
                            transform: scale(0);
                            transition: all 0.3s;
                            margin-left:-30px; 
                        }
    
                        #first ul li:hover::before {
                            transform: scale(1);
                        }
        </style>
    
    
    
     <div id="first">
                <ul>
                    <li>
                        <h5>a</h5>
                    </li>
                    <li>
                        <h5>b</h5>
                    </li>
                </ul>
            </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 6:29 AM