时间戳

首页 > 解决方案 > 重叠文件夹选项卡外观

html - 重叠文件夹选项卡外观

问题描述

我正在尝试重新创建下面的选项卡外观。我试图在这个片段:before之后使用和:after伪元素，但重叠它们没有意义。我也在使用 React.js，但我希望我可以只用 CSS/HTML 来完成这个。实现这一目标的最简单方法是什么？

当前代码：

.tab-list {
  border-bottom: 1.5px solid #4EBDE5;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.tab-list-item:hover {
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}

.tab-list-active {
  border-width: 1px 1px 0 1px;
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}
<ol class="tab-list">
  <li class="tab-list-item tab-list-active">Name</div>
  <li class="tab-list-item">Name</div>
  <li class="tab-list-item">Name</div>
</ol>

期望的外观： 在此处输入图像描述 示例选项卡

标签： htmlcsstabs

解决方案

推荐阅读