th { .ordered { display: flex; justify-content: space-between; align-items: center; cursor: pointer; &::after { display: block; content: ""; width: 13px; height: 16px; opacity: 0.5; background-image: url('../svg/sortable.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; } &:hover::after { opacity: 1; } } .ordered-asc::after, .ordered-desc::after { opacity: 1; } .ordered-asc::after { background-image: url('../svg/sortable-down.svg'); } .ordered-desc::after { background-image: url('../svg/sortable-up.svg'); } }