Действительный якорь на нескольких пролетах

Question

У меня есть следующие html:

    <p class="main-text">
      <span>Lorem Ipsum</span>
      <span>Lorem Ipsum</span>
      <span>Lorem Ipsum</span>
      <span>Lorem Ipsum</span>
      <span>Lorem Ipsum.</span>
    </p>

И css:

.main-text > span {
    display: inline-block;
}

Мне нужно применить один якорь на всех промежутках, когда пользователь наводит курсор только на текст, он можете нажать на ссылку. Есть ли способ без использования нескольких таких якорей? ..

      <p class="main-text">
        <a href="same url">
          <span>Lorem Ipsum</span>
        </a>
        <a href="same url">
          <span>Lorem Ipsum</span>
        </a>
        <a href="same url">
          <span>Lorem Ipsum</span>
        </a>
        <a href="same url">
          <span>Lorem Ipsum</span>
        </a>
        <a href="same url">
          <span>Lorem Ipsum.</span>
        </a>
      </p>

Спасибо

Answer 1

Если вы хотите, чтобы все теги <span> направлялись на одну и ту же ссылку, и чтобы пользователи могли нажимать на теги <span>, но не в промежутках между ними, вы можете использовать что-то вроде этого.

.main-text a {
  pointer-events: none;
  text-decoration: none;
}

.main-text a span {
  pointer-events: auto;
}

<p class="main-text">
  <a href="https://google.com">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </a>
</p>

Answer 2

Это то, что вы имели в виду

.main-text>a>span {
  display: inline-block;
}
a { text-decoration:none }

<p class="main-text">
  <a href="https://www.lipsum.com/">
    <span>Lorem Ipsum</span>
    <span>Lorem Ipsum</span>
    <span>Lorem Ipsum</span>
    <span>Lorem Ipsum</span>
    <span>Lorem Ipsum.</span>
  </a>
</p>

Или это

document.querySelector(".main-text").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName == "SPAN") location = "https://www.lipsum.com/";
})

.main-text>span {
  display: inline-block;
  cursor: pointer
}

<p class="main-text">
  <span>Lorem Ipsum</span>
  <span>Lorem Ipsum</span>
  <span>Lorem Ipsum</span>
  <span>Lorem Ipsum</span>
  <span>Lorem Ipsum.</span>
</p>