• Как исправить танцующие ссылки?

    @meshoot
    "Прыгание" получается из-за того что элемент имеет разную высоту с бордером и без него. Решения проблемы 2:
    1) Делать подчеркивание псевдоэлементом (иногда дизайнеры делают особо упоротые подчеркивания и в этих случаях приходиться пользоваться только этим способом)
    2) Задать блоку фиксированную высоту в которую уже включен бордер в вашем случае у меня получилось вот так
    .advanrages_item{
      width: 30%;
      height: 30px;
      margin-bottom: 50px;
    }
    Ответ написан
    Комментировать
  • Как исправить танцующие ссылки?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Варианты:
    1. В обычном состоянии задавать прозрачную (transparent) границу той же толщины.
    border: 2px solid transparent;
    2. Задавать подчеркивание не с помощью border, а с помощью ::after и позиционирования.
    3. Задавать box-sizing: border-box и высоту. Плохой способ, во-первых, высоту вообще вредно задавать, во-вторых, может плавать вертикальное центрирование.
    4. Вместо border задавать фон линейным градиентом с четкой границей.
    background: linear-gradient(to top, red 2px, transparent 3px)


    В вашем случае, я бы выбрала 1ый или 4ый варианты.
    Ответ написан
    1 комментарий
  • Как исправить танцующие ссылки?

    @tyzberd
    .advanrages_item a{
      color: black; 	
     border-bottom: 2px solid transparent;
    }
    .advanrages_item a:hover{
     border-color: black;
    }
    Ответ написан
    Комментировать
  • Как исправить танцующие ссылки?

    snap44
    @snap44
    Фыр!
    Добавлять не бордер, а псевдоэлемент
    https://codepen.io/anon/pen/gjzdyx
    Ответ написан
    Комментировать