Input:checked + after element not working - css

Question

I'm trying to stylize my checkbox inputs. Everything works fine except the CHECKED option.
input:checked is working ok alone.... but when I add .filter__checkgroup::after nothing happens.
CSS:
.filter__checkgroup input[type="checkbox"] {
opacity: 0;
cursor: pointer;
width: 50px;
}
.filter__checkgroup-title {
padding-left: 6px;
}
.filter__checkgroup::before{
position: absolute;
margin-top: 5px;
border-radius: 1px;
width: 12px;
height: 12px;
border: 1px solid #999;
content: "";
cursor: pointer;
}
.filter__checkgroup::after {
position: absolute;
left: 37px;
margin-top: 7px;
height: 6px;
width: 8px;
border-left: 2px solid;
border-bottom: 2px solid;
color: #d19b4d;
transform: rotate(-45deg);
cursor: pointer;
content: "";
opacity: 0;
}
.filter__checkgroup:hover::after {
content: "";
opacity: 100 !important;
}
input:checked + .filter__checkgroup::after {
content: "" !important;
opacity: 100 !important;
}
HTML:
<section id="premmerce_filter_filter_widget-3" class="widget widget_premmerce_filter_filter_widget">
<div class="titulo-filtro"><span>SHOP BY</span></div>
<div class="filter filter--style-default" data-premmerce-filter="">
<div class="filter__item filter__item--type-checkbox" data-premmerce-filter-drop-scope="">
<div class="filter__header">
<div class="filter__title">
Categoria </div>
</div>
<div class="filter__inner " data-premmerce-filter-inner="">
<div class="filter__properties-list">
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-blazers-e-jaquetas" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=blazers-e-jaquetas&query_type_product_cat=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-blazers-e-jaquetas"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-blazers-e-jaquetas">
Blazers e Jaquetas </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-calcas" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=calcas&query_type_product_cat=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-calcas"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-calcas">
Calças </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-sem-categoria" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=sem-categoria&query_type_product_cat=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-sem-categoria"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-sem-categoria">
Sem categoria </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
13 </span>
</div>
</div>
</div>
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-product_cat-shorts-saias" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_product_cat=shorts-saias&query_type_product_cat=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-product_cat-shorts-saias"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-product_cat-shorts-saias">
Shorts e saias </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="filter__item filter__item--type-checkbox" data-premmerce-filter-drop-scope="">
<div class="filter__header">
<div class="filter__title">
Cor </div>
</div>
<div class="filter__inner " data-premmerce-filter-inner="">
<div class="filter__properties-list">
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-dourado" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=dourado&query_type_cor=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-dourado"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-dourado">
Dourado </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-marrom" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=marrom&query_type_cor=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-marrom"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-marrom">
Marrom </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
<div class="filter__properties-item ">
<div class="filter__checkgroup" data-filter-control-checkgroup="">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox" data-filter-control="" id="filter-checkgroup-id-cor-xadrez" data-premmerce-filter-link="https://ouipetite.com.br/loja?filter_cor=xadrez&query_type_cor=or">
<label class="filter__checkgroup-check" data-filter-control-label="" for="filter-checkgroup-id-cor-xadrez"></label>
<label class="filter__checkgroup-title " for="filter-checkgroup-id-cor-xadrez">
Xadrez </label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">
1 </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

In order for input:checked + .filter__checkgroup::after to work, the input would have to be a sibling of .filter__checkgroup, but instead it's a child.
There's no way to select this way in CSS, but you could use JS to do it. Like:
var checks = document.querySelectorAll('.filter__checkgroup-control')
checks.forEach( function(el) {
var root = el.closest('.filter__checkgroup')
el.addEventListener('click', function() {
root.classList.toggle("checked")
})
})
.filter__checkgroup::after {
content: "something";
display: block !important;
padding: 1em;
background: blue;
color: white;
clear: both;
opacity: 0;
}
.filter__checkgroup.checked::after {
opacity: 1;
}
<div class="filter__properties-item">
<div class="filter__checkgroup">
<div class="filter__checkgroup-body">
<div class="filter__checkgroup-link">
<input class="filter__checkgroup-control" type="checkbox">
<label class="filter__checkgroup-check"></label>
<label class="filter__checkgroup-title">Dourado</label>
</div>
</div>
<div class="filter__checkgroup-aside">
<span class="filter__checkgroup-count">1</span>
</div>
</div>
</div>