Why my styles don't work when I get data from vuex?

Hi, there was a problem with which I can not figure out alone, so I hope for your help!
So, I have a layout:

.choicePrice(v-for="item in getCheckouts")
  p {{item.text + ' ' + item.price}}
.priceOne
   input(type="radio" id="priceChoice" name="choicePrice" class="inputMoney")
   label(class="labelMoney" for="choicePrice")

As you can see from the state, I take only text and price.
Next comes the container with the styles, i.e. there is no default input, it is hidden and a label with the styles need me.

In below its a style

.priceOne
  position absolute
  width 180px
  left 18.5px
  bottom -91px
  height 180px
  background #eddcc4
  z-index 1
  transform rotate(-45deg)
  border-bottom-left-radius 30%
  border-top-right-radius 30%
  display flex
  align-items flex-end
  margin-left 20px

When I click on it appears ::after and the background changes

#priceChoice:checked+label:after
  background #f4c94f !important

The problem is that it does not work. Those. I have similar styles below, but without vuex and everything works (the label :: after background is replaced) nothing helps right away, neither the z-index nor the change of position, even if you don’t see the style without scoped anyway: checked. Please indicate the error!

Its style for labelMoney

.labelMoney
  display inline-block
  position relative
  line-height 20px
  cursor pointer
  &::before
    content ""
    position absolute
    top -76px
    right -80px
    width 50px
    height 50px
    border-radius 50%
    background-color #fff
    z-index 5
   &:after
   z-index: 10;
   content: "";
   position: absolute;
   left: 37px;
   top: -68px;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background: #ffffff;

A demo would be helpful.

So far I see two things:

  1. the non-working pseudo-element does use wrong syntax:
/* wrong: */
#priceChoice:checked+label:after
/* right */
#priceChoice:checked+label::after

…unless your preprocessor works differently …

Also, you don’t style the after element in any way, it it will not take up any space, and therefore is not visible.

For the money input, you do style it and give it a size:

  &::after
   z-index: 10;
   content: "";
   position: absolute;
   left: 37px;
   top: -68px;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background: #ffffff;

1 Like

Thanks you so much!