css - 单击css时如何更改符号？

Question

如何在单击小部件标题时将符号更改为“V”，单击返回后小部件标题将变回符号“>”。

点击前图片:link

这是我在小部件标题后添加的 css。

.widgettitle a::after {
    content: " >";
        font-size:16px;
        color:#d3db2c!important;
}

Answer 1

您必须使用复选框 hack 在纯 CSS 中实现此目的:

.link {
  text-decoration: none;
}
.checkbox {
  display: none;
}

.link:after {
  content: '►';
  margin-left: 5px;
  display: inline-block;
}

.checkbox:checked ~ .link:after {
  transform: rotate(90deg);
}

<div class="link-container">
    <label for="checkbox-1">Click me</label>
    <input type="checkbox" id="checkbox-1" class="checkbox">
    <a href="#" class="link"></a>
</div>