I have 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;
}

It creates an arrow:

arrow

i want to make It wider. How can I do this with only css?

CodePudding user response：

simply change ˅ with ﹀.

.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 property

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

Where the first parameter is the horizontal stretch and the second parameter is the vertical stretch.