Insert wrap span tag around contents of a link tag automatically

The effect you are looking for can be achieved by adding the box-shadow to the link element directly. The span is totally unnecessary:

Just change this:

a {
  color: #545454;
  text-decoration: none;
}

a span:hover {
  color: #000000;
  box-shadow: inset 0 -10px #ffbe76;
}

a span{
  box-shadow: inset 0 -10px #f6e58d;
}

To this:

a {
  color: #545454;
  text-decoration: none;
  box-shadow: inset 0 -10px #f6e58d;
}

a:hover {
  color: #000000;
  box-shadow: inset 0 -10px #ffbe76;
}