Я ищу, чтобы сделать доступную область ссылок больше, чем на самом деле, для доступности, поскольку для предполагаемых пользователей это может быть трудно ударить. Примерно в 1,5 раза размер может быть уместным. Это ссылки в обычном тексте, поэтому я не могу сделать их более крупными, что испортило бы макет.
Я использую специальные функции HTML5, CSS3, JS или даже Mozilla для достижения этой цели, поскольку последняя версия Firefox является единственной целью, хотя базовый CSS/HTML, а не такие хаки, конечно, будет намного предпочтительнее!
Один из вариантов, который может работать, - использовать псевдоэлемент :after. Что-то вроде этого:
a {
position: relative
}
.bigger:after{
content:"";
padding: 50px;
position: absolute;
left: -25px;
top: -25px;
}
Числа могут быть изменены по своему усмотрению. Единственный недостаток, который я вижу сразу, - это то, что вам нужно поддерживать что-либо до IE8. http://caniuse.com/#feat=css-gencontent
Здесь fiddle.
Вы можете сделать это, используя большее дополнение.
Например:
.a{
padding: 20px;
margin: -20px; //lets keep the layout
}
Здесь у вас есть живой пример: http://jsfiddle.net/u5kuJ/1/
Обновлено:
С вашей скрипкой: http://jsfiddle.net/XXgqu/1/
Я сделал обновление для ответа gotohales, оно будет работать с любой длиной текста, а затем добавит пробел.
a {
position: relative;
}
.biggerForMobile:before{
content:"";
width:100%;
height:100%;
position:absolute;
padding:12px;
top:-10px;
left:-10px;
}
Вы можете использовать псевдоэлемент :after для прокладки элемента, и используя transform и position, вы можете позиционировать отступы, центрированные по центру элемента, не влияя на другие элементы.
Измените padding: 30px на любое дополнение, которое вам нужно.
.padded-click {
position: relative;
}
.padded-click:after{
padding: 30px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Примечание. Это основано на решении gotohales, которое является отличным подходом, но используя верхние и левые значения пикселей, поскольку решение gotohales требует учета ширины/высоты элемента, который мы дополняем, иначе будет добавлено дополнение от центра.
Я уверен, что вы не можете делать то, что вы просите. Единственное, что приходит на ум, - это добавление отступов, маржи и высоты линии. Хотя это не мое любимое решение, но в зависимости от контекста сайта, возможно, есть страница со всеми перечисленными ссылками, которая имеет более крупную цель.
Кроме того, возможно использование свойств outline и outline-offset CSS с хорошим контрастом, чтобы люди знали об этом.
Другое дело, люди, которые нуждаются в более крупной цели, чаще используют клавиатуру для навигации по веб-сайту, поэтому помощь на вашем сайте может отличаться от клавиатуры. Например, у вас есть заголовок и боковая панель, через код, поступают ли они перед основным контентом? Если это так, возможно, также поможет skip nav или несколько (в зависимости от макета).