Angular/CSS实现菜单li元素右侧添加向下箭头方案咨询

实现方案 #

不需要使用图片实现，你可以选择以下两种方案达成效果：

方案一：使用项目已引入的Boxicons图标实现（改动最小）

你项目已经引入了Boxicons图标库，直接在菜单a标签末尾追加向下箭头图标即可：

1. 修改admin.component.html里的li项代码，示例如下：

<li [ngClass]="{ selected: selectedTab === 'market' }">
  <a
    routerLink="market"
    (click)="selectElementMenu(); selectedTab = 'market'"
  >
    <i class="bx bx-grid-alt"></i>
    <span class="links_name">Market</span>
    <!-- 新增箭头图标 -->
    <i class="bx bx-chevron-down menu-arrow"></i>
  </a>
</li>

所有li项都按上面的格式追加箭头图标即可。
2. 在styles.css中追加箭头样式：

/* 箭头基础样式 */
.sidebar .nav-links li a .menu-arrow {
  /* 自动靠左推到最右侧 */
  margin-left: auto;
  margin-right: 16px;
  color: #fff;
  font-size: 18px;
  transition: transform 0.3s ease;
}
/* 选中状态下箭头旋转为向上，适配展开交互 */
.sidebar .nav-links li.selected a .menu-arrow {
  transform: rotate(180deg);
}

方案二：纯CSS伪元素实现（无需修改HTML）

不需要改动HTML代码，直接追加CSS即可生成箭头：
在styles.css中添加以下代码：

/* 用边框生成向下箭头，插入到a标签末尾 */
.sidebar .nav-links li a::after {
  content: '';
  margin-left: auto;
  margin-right: 16px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: transform 0.3s ease;
}
/* 选中状态下箭头旋转为向上 */
.sidebar .nav-links li.selected a::after {
  transform: rotate(180deg);
}

小优化提示 #

你现有CSS中选中样式的写法优先级不够，原代码.sidebar .nav-links li a:hover, .selected的选中状态不会生效，建议修改为：

.sidebar .nav-links li a:hover,
.sidebar .nav-links li.selected a {
  background: #081d45;
}

内容的提问来源于stack exchange，提问作者aagharaf