CODEWITHSUNDEEP
css
ICoded
ICoded

Reputation: 341

CSS pseudo element should stay if parent is active

I am playing with CSS pseudo elements. As soon as the menu button gets hovered it receives a small orange underline. This element should stay as soon as the dropdown-container is visible. Is there a light weight solution to achieve such behaviors?

In case pseudo elements aren´t the best solution for my need, I am open minded for different solutions.

https://jsfiddle.net/j3g49fwd/

$(".dropdown-btn").click(function() {
    this.classList.toggle("increase")
    $(".dropdown-container").toggle()
})
.wrapper {
    position: relative;
    top: 5vh;
    margin: 40px 30px 30px 30px;
    height: fit-content;
    background: white;
    border-radius: 10px;
    box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
        15px 15px 15px rgba(70, 70, 70, 0.12);
    padding: 1vw;
}

.dropdown-btn {
    display: flex;
    justify-content: center;
    padding: 10px 0px 10px 20px;
    text-decoration: none;
    display: block;
    border: 1px solid transparent;
    background: none;
    height: fit-content;
    min-height: 5vh;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.dropdown-btn:after {
    content: "";
    display: block;
    margin: 3px 0 0 0;
    width: 0;
    height: 1px;
    background: rgb(242, 123, 57);
    transition: all 0.4s;
}

.dropdown-btn:hover::after {
    width: 100%;
}


.dropdown-container {
    display: none;
    padding: 10px 20px 10px 20px;
    margin: 0 0 2vh 0;
}

.increase {
    font-size: 20px !important;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <button class="dropdown-btn">I am a menu button
      <label class="menu-title" id="flow-menu-title"></label>
        <i class="fa-solid fa-gear col-1 dropdown-icon"></i>
    </button>
    <div class="dropdown-container">
      Hello Stackoverflow
    </div>
 </div>
</body>
       
</html>

Upvotes: 0

Views: 26

Answers (1)

Pesulap
Pesulap

Reputation: 894

if I understand you correctly, you should be able to edit the CSS just like this:

.dropdown-btn.increase::after,.dropdown-btn:hover::after {
    width: 100%;
}

https://jsfiddle.net/bkefg9dt/

Upvotes: 2

Related Questions