css - 添加分隔线 |菜单之间

Question

我正在尝试在我的导航菜单(标题)之间添加一个分隔符。

所以基本上把它变成A|B|C

我尝试添加这段代码:

这是一个编辑:

所以我的截图，从那里检索标题和 url 看起来像这样:

<li class="dropdown{% if link.active %} selected{% endif %}{% if submenu_type == 'menu_two_columns' %} tt-megamenu-col-02{% elsif submenu_type == 'megamenu' %} megamenu{% else %} tt-megamenu-col-01{% endif %}" {{ block.shopify_attributes }}>

  <a href="{{ link.url }}" class=".link">{{ link.title }}</a>

然后我在 theme.css 中添加了这段代码

.link {
  position: relative;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
  background-color: #ddd;
  transition: all 0.2s ease;
}

.link:before {
  content: '|';
  position: absolute;
  left: -1px;
  line-height: 40px;
}

.link:first-child:before {
  content: '';
}

.link:hover {
  background-color: #aaa;
  color: #000;
}

但是，我没有得到 |

Answer 1

您将宽度设置为 1px 以链接类，因此不会显示该类的内容，只需替换您的 css 代码即可

.link{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

与

.link{
   height: 40px;
   width: auto;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}