Html 如何使用css实现这一点？

我不是一个真正的前端家伙，但我正在努力学习。我从我的设计师那里得到了这个psd，我想知道为菜单项前面的这个小选项卡编写样式和标记的最佳方式是什么

我已经开始使用bootstrap构建其他所有东西，但这里是我目前为止的菜单

再次感谢你的帮助

.sideMenu {
    width: 230px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
}

.sideMenu > li {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-indent: 25px;
    position: relative;
    z-index: 2;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #E1E6EF;
    -webkit-backface-visibility: hidden;
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .2s ease;
        -moz-transition: height .2s ease;
            transition: height .2s ease;
}

.sideMenu > li.open {
    background-color: #F5F5F5;
    position: relative;
    -webkit-backface-visibility: hidden; 
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .4s ease;
        -moz-transition: height .4s ease;
            transition: height .4s ease;
}

.sideMenu > li.active {
    background-color: #E5E9EA;
    color: #6E787E;
    font-weight: bold;
    border-top: 1px solid #E1E6EF;
}


.sideMenu > li > a {
    display: block;
    height: 50px;
}

---

这里有一个基本的例子

CSS:

HTML:

第1项
第2项

---

TL；DR:用borders来获得你所说的“蓝色标签”的东西。

你就不能在上面加一个

左边框吗？是的，正如鲁迪奥夫斯基·泽贝尔（rudeovski ze bear）在下文中所建议的那样，谢谢，这很好用。只要计时器允许，我会尽快接受您的回答^^如果我想为每个项目附加一个单独的选择器，正确的语法应该是这样的。侧菜单.dashboard>li.active{border left:6px solid#6E787E；}其中.dashboard是Selector或EverMind，我解决了它。不管怎样，谢谢，它是.sideMenu>li.active、.dashboard>li.active~
.menu { width: 300px; border-bottom:1px solid #ddd; margin:0; padding:0 }
.menu-item { border-left:5px solid #fff; border-top: 1px solid #ddd; color:#666; list-style:none; padding:5px; }
.menu-item:hover { border-left:5px solid #ddd; background: #eee; }

<ul class="menu">
    <li class="menu-item">Item 1</li>
    <li class="menu-item">Item 2</li>
</ul>