HTML: Any way to reduce the clickable area of a text in an onclick event?

let counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").textContent = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").textContent = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.counter-container {
  display: grid;
  font-size: 150px;
  place-content: center;
  place-items: center;
  margin-top: 130px;
  column-gap: 10px;
  grid-template-areas:
    "counter counter"
    "minus      plus";
  grid-template-rows: auto 50px;
  margin: 0 auto;
  width: 170px;
}

.counter-container span {
  cursor: pointer;
  background-color: #50fa785b;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
}

.counter-container span::after {
  right: 0;
  position: absolute;
  top: -70px;
}

#counter { grid-area: counter; };

.del { grid-area: minus; }
.add { grid-area: plus; }

.del::after { content: "-"; left: 0; }
.add::after { content: "+"; left: -11px; }

<div class="counter-container">
  <div id="counter">1</div>
  <span onclick="subtract()" class="del"></span>
  <span onclick="add()" class="add"></span>
</div>