<div class="roman-pagination">
  
  <label class="roman-radio">
    <input type="radio" name="radioName" checked>
    <span class="numeral">I.</span>
    <span class="title">The First</span>
  </label>
  
  <label class="roman-radio">
    <input type="radio" name="radioName">
    <span class="numeral">II.</span>
    <span class="title">The Second</span>
  </label>
  
  <label class="roman-radio">
    <input type="radio" name="radioName">
    <span class="numeral">III.</span>
    <span class="title">The Third</span>
  </label>
  
  <label class="roman-radio">
    <input type="radio" name="radioName">
    <span class="numeral">IV.</span>
    <span class="title">The Fourth</span>
  </label>
  
  <label class="roman-radio">
    <input type="radio" name="radioName">
    <span class="numeral">V.</span>
    <span class="title">The Fifth</span>
  </label>
  
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.roman-pagination {
  width: 400px;
  height: 300px;
  background-color: #F1F1F1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.roman-radio {
  margin: 0 8px;
  color: #969696;
}

input[type="radio"] { display: none; }
input[type="radio"]:checked ~ span { color: black; }
input[type="radio"]:checked ~ .title { display: inline; margin-left: 0; }

.numeral {
  
}

.title {
  display: none;
  margin-left: -16px;
}