SO-35253694

by David Thomas

HTML

<input id="us" type="radio" name="sizing" checked />
<label for="us">US</label>
<input id="eu" type="radio" name="sizing" />
<label for="eu">EU</label>

<p>This is the start of the article and this shoe is only available in <span data-units="US">11.5</span> <span data-units="EU">45</span>.</p>

CSS

label {
  box-sizing: border-box;
  width: 3em;
  height: 2em;
  background-color: #999;
  color: #fff;
  font-weight: 900;
  border-radius: 0.5em;
  padding: 0.25em;
}

input:checked + label {
  background-color: limegreen;
}

input[type=radio] {
  position: absolute;
  left: -10000px;
}

span[data-units] {
  display: none;
}

#us:checked ~ p span[data-units=US] {
  display: inline-block;
}

#eu:checked ~ p span[data-units=EU] {
  display: inline-block;
}

span[data-units]::after {
  content: ' (' attr(data-units) ')';
  color: #999;
  font-size: smaller;
}