CODEWITHSUNDEEP
htmlcss
TomFan
TomFan

Reputation: 143

Can I change before element with a new class

I am making some css template with my style. There is a fill btn. The sample is as follows,

.my-customer-fill-btn {
    width: 100px;
    height: 100px;
    position: relative;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}
  <button class="my-customer-fill-btn my-customer-testing-border"></button>

Then, I'd like to remove the ::before element color.

My target:

If I add a color class for my btn, ::before element bg property change.

As I want to create many fill btns in my page

.my-customer-fill-btn {
    position: relative;
    background-color: transparent;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*removed bg color*/
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

.size {
  width: 50px;
  height: 50px
}
/*I'd use this class to change before element property*/
.color {
   background: blue;
}
  <button class="my-customer-fill-btn my-customer-testing-border size color"></button>

Upvotes: 0

Views: 50

Answers (1)

Brett Donald
Brett Donald

Reputation: 14467

.my-customer-fill-btn {
    position: relative;
    background-color: transparent;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*removed bg color*/
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

.size {
  width: 50px;
  height: 50px
}
/*I'd use this class to change before element property*/
.color::before {
   background: blue;
}
<button class="my-customer-fill-btn my-customer-testing-border size color"></button>

Upvotes: 2

Related Questions