I have a customised combo box component, i wanted to add style to the highlighted item and the selected item. I want to add beside the selected one but it is always showing to the first item, what is wrong here? enter image description here

.combobox-option {
  padding: 0.25em 0.5em;
  cursor: pointer;

  &.selected {
    background-color: red;
    color: var(--color-white);

    &::after {
      content: " ";
      cursor: pointer;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      background-image: url(../check.svg);
      background-repeat: no-repeat;
      background-position: right;
      background-size: contain;
    }
  }
  &.highlighted {
    background-color: var(--color-bg-blue);
    color: var(--color-white);
  }
}

<li
    tabIndex={0}
    className={clsx(
       "combobox-option",
        option.value === search && "selected",
        index === highlightedIndex && "highlighted", 
     )}
     key={option.label}
     onClick={() => {
         optionSelected(index);
         setIsOpen(false);
      }}
>
     <span>{option.value}</span>
</li>

CodePudding user response：

You seem to be missing a relatively positioned ancestor of the pseudo element. Most likely you should add position: relative to the .combobox-option class description — thus the CSS would know in relation to which element it should position your checkmark icon. Otherwise it would stick to the closest element with a position different from default static — or, if none is present on a page, to the very top of the document. Hope it helps!