Подчеркивание пунктиром css: Как добавить пунктирное подчеркивание к ссылкам?

Правильное подчеркивание ссылок: kpobococ_ — LiveJournal

Правильное подчеркивание ссылок: kpobococ_ — LiveJournal ?
Category:
  • IT
  • Cancel
Подчеркивание ссылок на сайтах — практика общепринятая. Сейчас на сайт, на котором не подчеркнуты ссылки, смотрят искоса (хочу передать привет ютубу). Потому что это удобно.

Есть и другая общепринятая практика, касающаяся ссылок: ссылки, которые запускают выполнение сценариев на странице, и нажатие на которые не уводит человека со страницы, подчеркиваются точечками (либо пунктиром). Но тут люди обычно сталкиваются с интересной проблемой: обычное подчеркивание текста и подчеркивание с помощью атрибута border-bottom находятся на разной высоте относительно текста.

Когда на сайте присутствуют подчеркивания только одного типа — это не проблема. Но что делать, когда ссылки на сайте смешанные и особенно когда они находятся близко друг от друга? Как правило, используют границы для обоих типов подчеркивания. Но одного этого не достаточно, ведь отступ от текста до границы фиксированный. Давайте попробуем сделать его регулируемым.

Альтернатива требует некоторой модификации верстки, однако незначительной и к тому-же полезной: текст внутри ссылки нужно будет обернуть в элемент span. После этого метод подчеркивания можно и унифицировать, добившись абсолютно одинаковых результатов во всех браузерах.

HTML:

<a href="foo.html"><span>Обычная ссылка</span></a>,
<a href="index.html"><span>посещенная ссылка</span></a>,
<a href="bar.html"><span>ссылка на сценарий</span></a>,
<a href="index.html"><span>посещенная ссылка на сценарий</span></a>

CSS:
a {
    text-decoration: none;
    border-bottom: 1px solid blue;
    position: relative;
    top: -2px;
}
a span {
    position: relative;
    top: 2px;
}
a:visited {
    color: purple;
    border-bottom-color: purple;
}
a:active {
    color: red;
    border-bottom-color: red;
}
a. ajax {
    border-bottom-style: dotted;
    
}

Результат можно посмотреть здесь.

Теперь, меняя свойство top у селекторов a и a span, мы можем регулировать отступ от текста до подчеркивания. Главное чтобы значения top у этих селекторов были равны по модулю.

Единственным недостатком такого метода является отсутствие тени под подчеркивании при использовании свойства text-shadow.

Tags: css, html, webdev, интернет

Subscribe

  • Про Javascript

    Как же меня достали нытики, которые с пеной у рта доказывают мне, что нельзя дописывать свойства и методы напрямую в прототип Object. Я долго пытался…

  • Progress bar на CSS3

    Недавно столкнулся по работе с интересной задачей. В верстке одного из сайтов присутствовал progress bar со шкалой под ним. Естественно,…

  • Почему SEO скоро вымрет

    Перед началом поста хочу оговориться, что в классическом понимании SEO — меры исключительно технического характера, позволяющие поисковым системам…

Photo

Hint http://pics. livejournal.com/igrick/pic/000r1edq

  • 2 comments
    • 2 comments

    Отображение точек или заполнителей между знаками табуляции

    Word для Microsoft 365 Word для Microsoft 365 для Mac Word 2021 Word 2021 for Mac Word 2019 Word 2019 для Mac Word 2016 Word 2016 для Mac Word 2013 Word 2010 Еще…Меньше

    Между знаками табуличек могут быть точки, тире или другие символы-«закладки», которые выстроили данные.

    Добавление символов табулика

    1. В диалоговом окке Абзац и выберите вкладки.

    2. Добавьте или выберите табулю, а затем выберите параметр символа руководителя в области

      Руководитель, который вы хотите отобразить.

    Теперь вы можете добавить записи, и при нажатии tab появится строка с символами, которые вы выбрали. Данное форматирование будет добавляться в каждую новую строку до тех пор, пока вы не измените заполнитель. Чтобы изменить форматирование таким образом, чтобы не было руководителя, выполните указанные действия и выберите нет в области Руководитель.

    Чтобы выровнять данные, между знаками табуляции можно отобразить точки, штрихи или другие заполнители.

    Добавление символов табулика

    1. Перейдите на вкладку Формат > .

    2. Выберите вкладку, чтобы добавить символы руководителей.

    3. Выберите параметр символа руководителя в области Руководителя, который вы хотите отобразить.

    4. Нажмите кнопку ОК.

    Теперь вы можете добавить записи, и при нажатии tab появится строка с символами, которые вы выбрали. Данное форматирование будет добавляться в каждую новую строку до тех пор, пока вы не измените заполнитель. Чтобы изменить форматирование таким образом, чтобы не было руководителя, выполните указанные действия и выберите нет в области Руководитель.

    Примечание: Если вы работаете с различными типами табуляции, то вы можете использовать несколько видов заполнителей.

    Выберите каждую вкладку в поле Позиции табулки и выберите другой руководитель.

    См. также

    Оглавление

    Использование линейки в Word

    Выравнивание чисел по десятичным запятым с помощью табуляции «По разделителю»

    css — многострочный пунктирный или пунктирный текст-подчеркивание

    Поскольку подчеркивание текста в CSS допускает только сплошную линию, а ее положение находится прямо в нижней части строк, я использую border-bottom плюс небольшой отступ для получения пунктирного или пунктирного текста подчеркнуть.

     h3{border-bottom:1px с точками #999; заполнение снизу: 5px;}
     

    Теперь проблема в том, что когда текст заголовка (или абзаца, или любого другого элемента) занимает 2 строки или более, пунктирное подчеркивание просто делает то, что делает каждая граница, то есть остается внизу блочного элемента.

    Если я использую стиль подчеркивания текста, подчеркивание остается с текстом, но подчеркивание текста поддерживает только сплошную линию и, насколько мне известно, без отступов.

    Итак, как мне отобразить многострочный текст с пунктирным или пунктирным подчеркиванием?

    Спасибо

     h3 {
      нижняя граница: 1px пунктир #999;
      дисплей: встроенный;
    }
     

    Итак, вы получили то, что вам нужно.
    Но вы должны иметь в виду, что

    тогда (конечно) больше не является блочным элементом. Но вы можете «избежать» этого, поместив

    в
    .

    5

    «Немного» поздно, но есть способ с text-decoration-style и text-decoration-line настроить подчеркивание в некоторых браузерах.

     -moz-text-decoration-line: подчеркивание;
    -moz-text-decoration-style: пунктирный;
     

    1

    У меня тоже была похожая проблема, но с тегами . В моем случае это было свойство css float, из-за которого граница отображалась только под последней строкой. Поэтому я заключил теги с тегами и переместил css float:left в . Это устранило проблему, теперь нижняя граница появляется под всеми строками всякий раз, когда длинная ссылка переносится, чтобы соответствовать содержащему div.

    Пересмотренный стиль CSS и структура HTML выглядят следующим образом:

     a {граница-нижняя:1px пунктирная красная; }
      span.nav-ссылка { float:left; } 
     Тестовая ссылка 

    Надеюсь, это кому-нибудь поможет.

    Спасибо,

    0

     text-decoration: подчеркивание пунктиром;
    оформление текста: подчеркивание пунктиром;
     

    2

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    css — пунктирное подчеркивание неправильно отображается в Chrome

    спросил

    Изменено 4 года, 7 месяцев назад

    Просмотрено 3к раз

    В Chrome 65 это выглядит как text-decoration: подчеркивание пунктиром; дает неэлегантный результат:

    В то время как в Firefox я получаю ожидаемый результат:

    Что не так с хромом?


    Я расширил фрагмент еще одним тестом. Кажется, что это не работает только с определенными размерами шрифта и шрифтами. В частности, здесь с Trebuchet MS и размером шрифта 18px.

     диапазон{
      оформление текста: подчеркивание пунктиром;
      семейство шрифтов: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, без засечек;
      набивка: 1рем;
      цвет фона: черный;
      белый цвет;
      отображение: встроенный блок;
      поле: 1 бэр;
    } 
     <диапазон>
      Какая-то кнопка размером 12px
    
    
    <диапазон>
      Какая-то кнопка размером 14px
    
    
    <диапазон>
      Какая-то кнопка размером 16px
    
    
    <диапазон>
      Какая-то кнопка 18px
    
    
    <диапазон>
      Какая-то кнопка размером 20px
     
    • css
    • google-chrome
    • подчеркивание
    • текстовые украшения

    5

    Использовать text-decoration-skip-ink: none (Значение по умолчанию было изменено на auto в https://crrev.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *