Отображение текста между строкой не работает на сайте

перейдите по этой ссылке: http://demo.kidsdial.com/

ниже изображений слайд-шоу, вы можете увидеть текст "TOP OFFERS", отображаемый между строкой

если вы прокрутите вниз, вы можете увидеть текст "TOP CATEGORIES", я использовал тот же код и выше, но

"ТОП-КАТЕГОРИИ" текст не отображается между строками.

В основном я использую следующую ссылку. но почему он не работает.

Техника CSS для горизонтальной линии со словами в середине

для вышеуказанного кода ссылки я тоже использую это:

<div class= "horizontal_line_1 ">
<div><span>text TEXT</span></div>
</div>

Ответ 1

Просто измените

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 12px;
}

По существу, вы просто меняете 1.2em на 12px, так как 1.2em эквивалентно 24px.

Ответ 2

Линии "ТОП-КАТЕГОРИИ" отображаются с "ТОП-ПРЕДЛОЖЕНИЯ". Две верхние строки - "ТОП-КАТЕГОРИИ". Вам нужно оттолкнуть его. Если вам нужны две линии, используйте это для "ТОП-ПРЕДЛОЖЕНИЙ". border-top, height и top.

.horizontal_line span::before, .horizontal_line span::after {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 22px;
  width: 35%;
}

Это для "ТОП-КАТЕГОРИЙ". border-bottom, height и top.

.horizontal_line_3 span::before, .horizontal_line_3 span::after {
  border-top: 1px solid red;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 5px;
  width: 35%;
  border-bottom: 1px solid red;
}

Возможно, вам также потребуется добавить некоторый запас.

.horizontal_line_3 span {
  display: inline-block;
  font-size: 25px;
  margin: 0 0 22px 0;
}