CSS—利用伪元素在文字后加三角符号

CSS—利用伪元素在文字后加三角符号

1、绘制三角形

.head-item-down {
      width: 0; 
      height: 0;
      border-top: 0.4vw solid #b9b9b9; 
      border-bottom: 0.4vw solid transparent; 
      border-left: 0.4vw solid transparent; 
      border-right: 0.4vw solid transparent; 
}

2、给文字设置相对定位

 .head-item {
      width: 20%;
      position: relative; /*给文字设置定位 */
    }

3、利用伪元素

 .head-item-down::after {
      content: ""; /* 必需属性，表示生成内容为空 */
      display: inline-block; /* 将伪元素转换为行内块元素 */
      width: 0; /* 初始化宽度为0 */
      height: 0; /* 初始化高度为0 */

      border-top: 0.4vw solid #b9b9b9; /* 上边界线条不显示 */
      border-bottom: 0.4vw solid transparent; /* 下边界线条不显示 */
      border-left: 0.4vw solid transparent; /* 左边界线条为黑色 */
      border-right: 0.4vw solid transparent; /* 左边界线条为黑色 */

      position: absolute; /* 将伪元素绝对定位到容器内部 */
      left: 8.2vw; /* 根据需求调整三角形与文本之间的间距 */
      top: 60%; /* 将三角形居中放置 */
      transform: translateY(-50%); /* 微调垂直位置 */

      cursor: pointer;
    }