Увеличить точку доступа с текстовыми ссылками, не влияя на внешний вид текста или страницы?

Question

Не хотите никаких цветов фона или границ - просто хотите увеличить невидимую область ссылки выше, ниже, справа и слева от ссылки.

Пробовал изменять отступы, границы и поля, но они либо изменяют внешний вид текста (например, создают дополнительные пробелы вокруг ссылки, чего я не хочу), либо просто не влияют на размер горячей точки.

a {
  padding: 5px;
}

Это решение ближе, но не совсем там.Я думаю, что знающий CSS кодер мог бы решить эту проблему.

HTML

flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj 
flkasj fdlkasjd flkj sd <a href="#">banana</a><span>banana</span> adfsddfa 
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk

CSS

span{
  color:blue;  /* TO MAKE IT LOOK LIKE A LINK */
}

a{
  position:fixed;
  /* color:transparent; /*  UNCOMMENT WHEN SOLVED */
  padding:20px;
}

Обратите внимание, чтоЯ повторяю связанный текст banana ДВАЖДЫ , один раз для скрытого тега ссылки, и снова для видимого текста.Причина, по которой я повторяю текст, заключается в том, чтобы гарантировать, что невидимый тег ссылки имеет тот же размер, что и видимый текст. Повторение текста таким способом является приемлемым для этого вопроса. Однако, в зависимости от того, как это делается, это может даже не понадобиться.(было бы предпочтительнее , а не повторить текст, если это возможно).

Как видите, "заполнение" ссылки css неверно - полученная ссылка удаленаmark:

Но это доказывает, что мы можем поместить связанную область где-нибудь помимо (или больше чем) исходного текста, не влияя на визуализацию страницы.Фиксированное позиционирование кажется необходимым, но, возможно, другое позиционирование будет работать лучше.Кроме того, возможно, теги a и span должны быть вложенными, а не последовательными.

Область ссылок можно сделать прозрачной после того, как CSS отработан, так что пользователь увидит только «поддельную» ссылку.

Answer 1

Вам даже не нужен элемент <span>, чтобы сделать это.Использование псевдоэлемента сделает всю работу за вас.Давайте оставим исходную разметку ссылки такой:

something <a href="#">banana</a> something

... тогда мы легко сможем решить эту проблему, поместив псевдоэлемент абсолютно в его родительский элемент:

a {
  position: relative;
  color: blue;
}

a::before {
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  content: '';
}

См. Подтверждение-примите пример ниже.В этом примере к псевдоэлементу добавлена ​​рамка, которая поможет вам визуально представить его структуру.Удалите атрибут для достижения прозрачности.

a {
  position: relative;
  color: blue;
}

a::before {
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border: 1px solid #000;
  content: '';
}

flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj 
flkasj fdlkasjd flkj sd <a href="#">banana</a> adfsddfa 
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk

---

В дополнительной заметке может потребоваться скрыть псевдоэлемент, используя при печати display: none, используя медиа-запрос @media print:

@media print {
    a::before {
        display: none;
    }
}