In HTML I have this:

<a id="hdr20"></a>
<div class="hdr-bar">
  <a href="#" class="hdr-btn">Top</a>
  <a href="#hdr19" class="hdr-btn">ToS</a>
  <a href="#hdr2" class="hdr-btn">ToC</a>
  <a href="#hdr21" class="hdr-btn">Skip</a>
</div>

I would like to use DRY (Don't Repeat Yourself) method and use something like this:

<a id="hdr20"></a>
<div class="hdr-bar">
  <class="hdr-btn">
    <a href="#">Top</a>
    <a href="#hdr19">ToS</a>
    <a href="#hdr2">ToC</a>
    <a href="#hdr21">Skip</a>
  </class>
</div>

I've tried <span class="hdr-btn but that doesn't work.

I've tried changing the: <div class="hdr-bar" to: <div class="hdr-bar hdr-btn" but that doesn't work.

Existing CSS

The CSS works great:

.hdr-bar {
  display: block;
  position: relative;
  width: 100%;
  height: .5rem;            // Allow bit extra for button box height
  text-align: right;        // Don't use "float: right;" that breaks rendering order
  &:before {
    content: "";
    display: block;
  }
}

.hdr-btn {
  display: inline-block;
  position: relative;
  color: $header-bg-color;  // Cayman green
  padding: 5px 15px;        // vertical, horizontal padding around button text
  font-size:0.75em;         // 75% of normal font for button text
  margin-left: 10px;        // Now that right aligned, switch margin side
  // From: https://stackoverflow.com/questions/65297617
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color: $honeydew; // Honeydew

  &:hover {
    background-position:bottom;
    color:#F0FFF0;
  }
}

Perhaps it's possible to assign the hdr-btn class to all elements within the hdr-bar class using JavaScript?