Css 结合 ：after 和 ：hover

#alertlist {
  list-style: none;
  width: 250px;
}

#alertlist li {
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
}

#alertlist li.selected,
#alertlist li:hover {
  color: #f0f0f0;
  background-color: #303030;
}

#alertlist li.selected:after {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #303030;
  content: "";
}

<ul id="alertlist">
  <li>Alert 123</li>
  <li class="selected">Alert 123</li>
  <li>Alert 123</li>
</ul>

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

Css相关问答推荐

Angular中嵌套数组的网格

下一个js app样式刷新页面后不工作页面

沿浮动形状—面元素外路径将文字垂直居中""

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

当弯曲方向设置为列时如何制作等高卡片？

具有共享的自动调整列宽的多个 CSS 网格

如何按列垂直对齐项目，但不在列内水平对齐

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)？

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

tailwind css 中的自定义组状态

普通流，流布局，块和内联布局有什么区别？

CSS动画恢复默认

如何断言 CSS 属性包含Cypress 测试中的一些文本？

iPhone X / 8 / 8 Plus CSS 媒体查询

跨浏览器方法使子 div 适合其父级的宽度

Select 标签的占位符

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

跨域 iframe 调整大小

带有一些 LESS 魔法的花式媒体查询

CSS3单向过渡？