Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Заголовок с горизонтальной линией посередине

Заголовок с горизонтальной линией посередине

galina2601 17-02-2021, 23:28 503 Уроки по CSS / Списки

Один из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image).

Есть недостаток – фон под заголовком должен быть однотонным иначе <span> будет виден.

Это блок со словом по центру

<div class="title-line">
<span>Подробности далее</span>
</div>


.title-line { font-size: 20px;
             color: rgb(50, 50, 50);
             text-transform: uppercase;
             line-height: 1.5;
             text-align: center;
             position: relative; }
.title-line span { background: #fff;
             display: inline-block;
             padding: 0 18px;
             position: relative; }
.title-line:before { content: '';
             position: absolute;
             top: 50%;
             left: 0;
             width: 100%;
             border-top: 3px solid #961C18; /* стиль линии */


Вот так это будет выглядеть в итоге:

ОТЗЫВЫ

Подробности далее

Подробности далее

Похожие новости

  • Нумерованный список с полоской между номерами
  • Нумерованный список с номерами в кружочках
  • Список с анимированным маркером на CSS
  • Еще один красивый список с помощью CSS
  • Красивый список с помощью CSS

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив