Как сделать область псевдоэлемента CSS кликабельной?
Вот FIDDLE для экспериментов.
Я создал <div > и сгенерировал CSS-контент с помощью .foo:after .
Я хочу, чтобы сгенерированный контент можно было щелкнуть, установив ссылку.
Если я оберну .foo якорем, он создаст ссылку вокруг .foo и .foo:after .
Однако я хочу сделать область .foo:after доступной для кликов, но не сам .foo .
Есть ли способ добиться этого с помощью чистого CSS? Возможно, изменить разметку?
HTML
CSS
Скриншот
3 ответа
Это должно работать, оно останавливает кликабельность ссылки, но затем разрешает ее для псевдоэлемента с использованием атрибута pointer-events.
Увеличить зону кликабельности ссылки — HTML/CSS
Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.
Плохой
Просто обернуть и заголовок, и картинку в ссылку следующим образом:
Обернуть все в одну ссылку:
Хороший
Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:
Можно использовать любой из этих трех способов, но лично я предпочитаю последний.
CSS кнопки с помощью псевдо-элементов
Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.
В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.
Используется шрифт «Open Sans» Стива Мэттсона.
Я не буду использовать CSS префиксы в данных примерах, но вы найдете их в исходных файлах.
Я не использовал свойство transition, потому что только Firefox поддерживает его в псевдо-элементах. Кроме этого, я считаю что кнопки работают хорошо и без его использования.
Разметка
Для работы всех кнопок пригодится только якорь, все остальные элементы мы будем создавать с помощью псевдо-класса ::before.
Первый пример
Я думаю это самый легкий пример, который делается обычным CSS.
Стили
Прежде всего, зададим основные стили для кнопки в обычном и активном состоянии. Обратите внимание, что кнопка позиционирована относительно. Это поможет при позиционировании элемента ::before:
Теперь сделаем серый контейнер вокруг кнопки, используя псевдо-элемент ::before. Абсолютное позиционирование сделает нашу жизнь легче при позиционировании самого элемента.
Второй пример
Этот пример немного сложнее из-за 3D-эффекта. Изначально кнопка находится за пределами контейнера, затем, при щелчке она уходит вниз:
Стили
А вот здесь уже сложнее:
Так как положение псевдо-элемента зависит от родительского элемента, то при перемещении родительского элемента на несколько пикселей, псевдо-элемент необходимо переместить на столько же пикселей, но в другую сторону.
Третий пример
Это одна из моих любимых кнопок, так как такой еще не было, перед тем, как я ее создал. Кажется, людям она очень нравится. Кнопка разделена на две части, и когда вы нажимаете на нее, она как бы «ломается».
Стили
Опять таки, начнем с легкой части. Обратите внимание на то, что здесь появился отступ. Он необходим для компенсирования ширины псевдо-элемента, если нужно расположить кнопку по центру. Если же не нужно, то отступ можно не использовать.
Перейдем к псевдо-элементам:
Четвертый пример
На этот раз мы будем использовать псевдо-элемент для стрелки, используя фоновое изображение. Вместо изображений так же можно использовать эти шрифтовые иконки.
Стили
Пятый пример
Этот пример не очень крутой, но вы можете его доработать по своему усмотрению.
Стили
В заключение
Ну, вот и все. Не забывайте, что эти создание этих кнопок является экспериментом, так что не каждый браузер будет корректно их отображать.