Как убрать привязку текста в ::before?

Question

[Balundula]

Здравствуйте!
Верстаю хеддер странички и столкнулся с проблемой. Для ссылки "личный кабинет" я через ::before вставил иконку (на примере будет просто черный прямоугольник), но текст привязывается к нижней границе иконки, как это можно исправить?
https://jsfiddle.net/nxzmvewh/1/

Answer 1

[Ankhena]

Вам сюда
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

И ещё за флексами.

Comments

[Ankhena]

Balundula и пожалуйста, разберитесь с тем, что у вас написано в первой половине стилей (сброс). Там куча никому не нужного устаревшего барахла. Не нужно тащить в свой код, всё что вы встретили на просторах интернета.
Вдумчиво напишите свой актуальный сброс только для тех селекторов и свойств, которые нужны.

[Антон Литвиненко]

Ankhena, до сих пор использую ребут из 4го бутстрапа. Ленька не даёт мне тратить время на написание своего идеального сброса. Возможно посоветуешь готовое решение, ато от вариантов из инета остались неоднозначные впечатления

[Ankhena]

Антон Литвиненко,
как-то так:

*, *::before, *::after {
  box-sizing: inherit; // или прямо border-box
}

*:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // убирает голубую подсветку при тапе на смартфонах
  // outline убираем только там, где заменили на другие видимые стили
}

// Удаляем все анимации и переходы для людей, которые предпочитают их не использовать
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  box-sizing: border-box; // если для * указан inherit, если border-box, то тут уже не нужно.
  min-height: 100%;
  padding: 0; // по привычке
  margin: 0; // по привычке
  -webkit-font-smoothing: antialiased; //правильное отображение шрифтов
  -moz-osx-font-smoothing: grayscale; //правильное отображение шрифтов
  -webkit-text-size-adjust: 100%; // запретить корректировку размера шрифта после изменения ориентации в iOS.
  text-rendering: optimizeLegibility; //правильное отображение шрифтов
  text-size-adjust: none; //запрет авто-увеличения текста на мобилках
  scroll-behavior: smooth; //плавная прокрутка к якорям
}

body {
  min-height: 100vh; // или 100%
  min-height: -webkit-fill-available; //  mobile viewport bug fix (webkit)
  margin: 0;
}

img {
  max-width: 100%;
  vertical-align: top;
}

a {
  text-decoration: none; // если так у всех ссылок в макете
  transition: 0.5s; // если так у всех ссылок в макете
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

#{$input-list} {
  line-height: 1;
  font-family: inherit; // либо шрифт, если не inherit по макету
}

.visually-hidden {
  position: fixed;
  transform: scale(0);
}

// стили ниже, если так требуются по макету, обычно для лендингов
figure {
  margin: 0;
}

dl {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

ul {
  padding-left: 0;
  list-style-type: none;
}

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

[Balundula]

Ankhena, Спасибо! Разобрался)) Но было сложновато понять как оно работает, понял только после наглядного примера по гайду на ютубе)))