Как сделать пунктирное подчеркивание ссылки?
 | |
| Создавая пунктирное подчеркивание текста или ссылки, то вы делаете этот элемент более заметная, который будет отличиться от стандартного. В этом материале подробно рассмотрим, как можно создать такое подчеркивание на интернет ресурсе. Думаю многие согласятся, что кликабельный элемент изначально должен отличатся и где-то даже выделятся на фоне с разными объектами. Это делается для того, чтоб пользователь или гости сайта могли сразу увидеть, что в этом описание или статье есть переход на другую страницу. Если говорить про ссылку, то это безусловно активный элемент, и здесь веб мастер старается его подчеркивать или создать в другом оттенке. Все потому, как уже говорилось, чтоб изначально была заметна при открытии страницы. За стандартное подчеркивание будет отвечать text-decoration свойство. Где вы также можете добавить к нему разное оформление, как посчитаете нужным видеть этот элемент. Если вы еще добавите в этому значение под названием underline, то автоматически выставляете сплошную горизонтальную линию, которая в ответе за вид подчеркивание. Но нам нужно создать подчеркивание, чтоб оно было пунктирной линией, что text-decoration в нашем случай не подойдет. Под это нам нужно совершенно другое свойство, под названием border-bottom, где только через него появится возможность аналогично поставить нижнею линию, только уже с пунктиром. Но это не все, так как остается сплошная линия, где все это можно запретить, а точнее text-decoration выставляем запрет на показ, где отвечает за это значение, как none. Чтоб этот трюк мог применяться к заданным ссылкам, то остается самостоятельно выставить класс по значению. 1. Давайте для начало рассмотрим метод, где ссылка будет под пунктирой линией, но при наведение клика они исчезает. HTML Код <a href="http://zornet.ru">ZorNet.Ru - сайт для вебмастера</a> CSS Код a { text-decoration: none; display: inline-block; border-bottom-style:dashed; border-bottom-width:1px; color: #16542d; } a:hover { border-bottom-style:none; } Когда поставите на сайт, то все ссылки станут под это обозначание, цвет сами подберете. 2. В этом варианте задаем класс, что можно вывести отдельно, на нужную ссылку оформление. HTML Код <a class="underscore_description" href="#">Здесь ключевое слово</a> CSS Код .underscore_description { text-decoration: none; border-bottom: 1px dashed #3c5e8e; color: #206588; } Это уже в выставленным классом идет, здесь при наведениенет не какого эффекта. Так как в первом и втором варианте вы можете сами добавить значкение, как по эффектам, так и по оформлению. Важно знать: Сам пунктир подчеркивание будет соответствовать не только исходящим ссылкам, то также текстовым командам, что при клике будут выполнять запланированные действия на интернет ресурсе или на странице. Если говорить про окно AJAX, где нужно обновлять документ, что будет происходить без определенной загрузки, то подчеркивание изначально переменяется на заданные элементы. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |