2

Как линию подчеркивания разместить на одной линии с текстом который не подчеркнут?

<h1>ТЕКСТ<u>ТЕКСТ</u></h1>

Пример

Пример

6
  • Вы имеете ввиду сделать перечеркнутый горизонтально по середине текст?
    – user218976
    11 июл 2018 в 10:11
  • @Anamnian Нет, нужно чтобы линия подчеркивания была чуть выше, на уровне текста который не подчеркнут.
    – Allen
    11 июл 2018 в 10:11
  • Приложите картинку того, как должен выглядеть итоговый результат. 11 июл 2018 в 12:03
  • @SashaOmelchenko Приложил.
    – Allen
    11 июл 2018 в 12:09
  • У вас на картинке явно используются разные шрифты и размеры для частей текста. В эту сторону и нужно вам двигаться.
    – user218976
    11 июл 2018 в 12:17

2 ответа 2

2

В трёх браузерах проверил - одинаково

* {
  margin: 0;
  padding: 0;
}

p {
  text-transform: uppercase;
  display: inline-block;
  font-weight: 900;
  text-align: left;
  color: orange;
}

i {
  display: inline-block;
  font-style: normal;
  text-decoration: underline;
  font-size: 90%;
  margin-left: -4px;
  margin-top: 1px;
  vertical-align: top;
  color: black;
}
<p>snc <i>group</i></p>

1

h1 {
  margin: 0;
}

h1 u {
  text-decoration: none;
  position: relative;
}

h1 u:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 3px;
  background: #000;
}
<h1>ТЕКСТ<u>ТЕКСТ</u></h1>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.