<a href="#" class="general">general</a>

<div>---</div>

<a href="#" class="strange">strange</a>
body {
  display: grid;
  place-items: center;
}

.general {
  &:hover {
    color: red;
  }
}
.strange {
  :hover {
    color: red;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.