使 :after 箭头变宽

Question

我有 css:

.custom-select::after {
    content: "˅";
  padding: 12px 8px;
  position: absolute;
  right: 20px;
  top: 8px;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}

它创建了一个箭头：

arrow

我想让它变宽。我怎样才能只用 css 来做到这一点？

Answer 1

只需将˅改成﹀即可。

.custom-select::after {
  content: "﹀";
  padding: 12px 8px;
  position: absolute;
  right: 20px;
  top: 8px;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}

Another answer using css transform scale 属性

transform: scale(2,1); 
/* Change the scale as needed*/

其中 first 参数是 horizontal 拉伸，second 参数是垂直拉伸。

使 :after 箭头变宽

Make :after arrow wider

html

css

styles