html - 行间显示文本在站点中不起作用

Question

请访问此链接:http://demo.kidsdial.com/

在幻灯片图片下方，您可以看到行间显示“TOP OFFERS”文字

如果向下滚动下方，您可以看到“TOP CATEGORIES”文本，我在上面也使用了相同的代码，但是

“TOP CATEGORIES”文本未显示在行之间。

基本上我使用以下链接。但为什么它不起作用。

CSS technique for a horizontal line with words in the middle

对于上面的链接代码，我也在使用这个:

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

Answer 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 .