css - 悬停在标签中时没有内容

Question

悬停时我想删除标签内的内容。我只试过葡萄牙标签。在元素内部工作时是否受到限制？谢谢

.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

只需将 #porting 选择器编辑为:

#portimg:after {
  display: inline;
  content: 'PORTUGAL';
}

此处您的代码已编辑。

.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>