@Nikidze

Почему маркеры списка выше элементов?

Ситуация как на картинке:

5e85d1f8d4a4d460973878.png

ul{
  list-style: none;
}

.success__reg-li{
  font-size: 18px;
line-height: 23px;
}

.success__reg-li::before {
  content: "\2022";
  color: #FF5D2B;
  font-weight: bold;
  display: inline-block;
  font-size: 35px;
  line-height: 23px;
  width: 1em;
}
  • Вопрос задан
  • 57 просмотров
Решения вопроса 2
TAbrahamyan
@TAbrahamyan
ul {
  list-style: none;
}

.success__reg-li {
  font-size: 18px;
  line-height: 23px;
  display: flex;
  align-items: center;
}

.success__reg-li::before {
  content: "\2022";
  color: #FF5D2B;
  font-weight: bold;
  display: inline-block;
  font-size: 35px;
  line-height: 23px;
  width: 1em;
}
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Первый вариант - маркеры на одном уровне с пунктами:

<ul>
  <li class="success__reg-li">Текст</li>
  <li class="success__reg-li">Текст</li>
  <li class="success__reg-li">Текст</li>
</ul>


* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  margin: 0;
}

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

.success__reg-li {
  font-size: 18px;
  line-height: 23px;
  position: relative;
  padding-left: 20px;
}

.success__reg-li::before {
  content: "\2022";
  color: #ff5d2b;
  font-weight: bold;
  display: inline-block;
  font-size: 35px;
  width: 1em;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
}


Второй вариант - маркеры немного выше пунктов, т.е как на скрине.

<ul>
  <li class="success__reg-li">Текст</li>
  <li class="success__reg-li">Текст</li>
  <li class="success__reg-li">Текст</li>
</ul>


* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  margin: 0;
}

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

.success__reg-li {
  font-size: 18px;
  line-height: 23px;
  position: relative;
  padding-left: 20px;
}

.success__reg-li::before {
  content: "\2022";
  color: #ff5d2b;
  font-weight: bold;
  display: inline-block;
  font-size: 35px;
  width: 1em;
  position: absolute;
  top: 40%;
  left: 20px;
  transform: translate(-50%, -50%);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы