Content none on hover in a label - css

Question

on hover i would like to remove the content inside a label. I have tried with the Portugal tab only. Is it restricted when working inside an element? Thank you
.tablabel {
background: rgba(0, 0, 0, .6);
border: 1px solid #000;
color: #fff !important;
height: 40px;
line-height: 37px;
width: auto;
padding: 2px 8px 2px 8px;
box-shadow: inset 0 0 0 0.1 transparent;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out .4s;
transition: ease-out .4s;
transform: translate3d(0, 0, 0);
font-size: 1.15em;
}
.tablabel:hover {
color: #000 !important;
}
#portimg {
content: 'PORTUGAL';
}
#portimg:hover {
content: none;
background: url("/images/flags/portugal-flag.svg");
background-position: center 10%;
background-size: 200px;
transform: translate3d(0, 0, 0);
}
#portimg:hover:after {
content: none;
}
<div class="col-8 justify-content-center">
<input id="tab-1" type="radio" checked="checked" name="tab-groupa" />
<input id="tab-2" type="radio" name="tab-groupa" />
<input id="tab-3" type="radio" name="tab-groupa" />
<input id="tab-4" type="radio" name="tab-groupa" />
<input id="tab-5" type="radio" name="tab-groupa" />
<p class="row text-center justify-content-center text-center">
<label id="portimg" class="tablabel" for="tab-1"></label>
<label id="ukimg" class="tablabel" for="tab-2">UNTIED KINGDOM</label>
<label class="tablabel btn btn-dark white text-center" for="tab-3">CYPRUS</label>
<label class="tablabel btn btn-dark white text-center" for="tab-4">SPAIN</label>
<label class="tablabel btn btn-dark white text-center" for="tab-5">GREECE</label>
</p>

Answer 1

Just edit the #porting selector to this:
#portimg:after {
display: inline;
content: 'PORTUGAL';
}
Here your code edited.
.tablabel {
background: rgba(0, 0, 0, .6);
border: 1px solid #000;
color: #fff !important;
height: 40px;
line-height: 37px;
width: auto;
padding: 2px 8px 2px 8px;
box-shadow: inset 0 0 0 0.1 transparent;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out .4s;
transition: ease-out .4s;
transform: translate3d(0, 0, 0);
font-size: 1.15em;
}
.tablabel:hover {
color: #000 !important;
}
#portimg:after {
display: inline;
content: 'PORTUGAL';
}
#portimg:hover {
content: none;
background: url("/images/flags/portugal-flag.svg");
background-position: center 10%;
background-size: 200px;
transform: translate3d(0, 0, 0);
}
#portimg:hover::after {
content: none;
}
<div class="col-8 justify-content-center">
<input id="tab-1" type="radio" checked="checked" name="tab-groupa" />
<input id="tab-2" type="radio" name="tab-groupa" />
<input id="tab-3" type="radio" name="tab-groupa" />
<input id="tab-4" type="radio" name="tab-groupa" />
<input id="tab-5" type="radio" name="tab-groupa" />
<p class="row text-center justify-content-center text-center">
<label id="portimg" class="tablabel" for="tab-1"></label>
<label id="ukimg" class="tablabel" for="tab-2">UNTIED KINGDOM</label>
<label class="tablabel btn btn-dark white text-center" for="tab-3">CYPRUS</label>
<label class="tablabel btn btn-dark white text-center" for="tab-4">SPAIN</label>
<label class="tablabel btn btn-dark white text-center" for="tab-5">GREECE</label>
</p>
</div>