JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="location-item">
    <input id="location-item-Norway" class="dNone" type="checkbox" name="location">
    <label id="location-item-Norway-label" class="flex row w100pc center-items hoverDark4 pointer" for="location-item-Norway">
        <div id="location-item-Norway-country" class="fs1_2em fw500">Norway</div>
    </label>
</div>

CSS

/*Styles for the pseudo element before [checked] change*/
#location-item-Norway-country::before {
    content: "+";
    display: inline-block;
    position: relative;
    text-align: center;
		font-weight:500;
    width: 1.5em;
}

/*Styles for the pseudo element after [checked] change*/
/*Background style change*/
#location-item-Norway[type=checkbox]:checked ~ #location-item-Norway-label{
    background:rgb(0, 150, 0);
}

/*Pseudo element style change*/
/*This is my problem area, unable to change the content*/
#location-item-Norway[type=checkbox]:checked ~ #location-item-Norway-label #location-item-Norway-country::before{
    content: "-";
}

/*----------------------------------------------*/
/*   STYLE THAT DOESN'T MATTER FOR THE PROBLEM  */
/*----------------------------------------------*/
body{
	font-family:areal, sans-serif;
}
#location-item{
	border:solid 2px gray;
	max-width:10em;
}

.dNone{
	display:none;
}
.flex{
	display:flex;
}
.row{
	flex-flow:row;
}
.w100pc{
	width:100%;
}
.center-items{
	align-items:center;
}
.hoverDark4:hover{
	background:rgba(0,0,0,0.4);
}
.pointer{
	cursor:pointer;
}
.fs1_2em{
	font-size:1.2em;
}
.fw500{
	font-weight:500;
}