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

Question

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

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

"TOP CATEGORIES" 行间不显示文本。

基本上我使用的是以下link。但为什么它不起作用。

CSS technique for a horizontal line with words in the middle

上面的 link 代码我也在用这个：

<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。

Answer 2

"TOP CATEGORIES" 行显示为 "TOP OFFERS"。前两行来自 "TOP CATEGORIES"。您需要将其向下推。如果您需要两行，请将此用于 "TOP OFFERS"。 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%;
}

这是给 "TOP CATEGORIES" 的。 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;
}

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

display text between line is not working in a site

html

css

magento