<h3>「:hover」の前に空白がある</h3>
<div class="oya">
  <div class="seikou">hoverに成功</div>
  <div class="sippai">hoverに失敗</div>
</div>

<h3>疑似要素の後につけている</h3>
<div class="oya">
  <div class="seikou2">hoverに成功</div>
  <div class="sippai2">hoverに失敗</div>
</div>
.oya{
  display:flex;
  justify-content:center;
  align-items:center;
  background:black;
  font-size:20px;
  padding:20px;
}

.seikou{
  background:yellow;
  width:160px;
  text-align:center;
}

.sippai{
  margin-left:50px;
  background:red;
  width:160px;
  text-align:center;
}

.seikou:hover {
  opacity:0.5;
}

.sippai :hover {
  opacity:0.5;
}

/* //////////////////////////////// */

.seikou2{
  background:yellow;
  width:160px;
  text-align:center;
}

.sippai2{
  margin-left:50px;
  background:red;
  width:160px;
  text-align:center;
}

.seikou2::before {
  content:"〇";
  font-weight:bold;
}

.sippai2::before {
  content:"〇";
  font-weight:bold;
}

.seikou2:hover::before {
  color:red;
}

.sippai2::before:hover {
  color:red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.