设置点击链接的样式 - 任何仅限CSS的解决方案？

Question

是否有任何CSS解决方案来设置点击 link，以便向用户提供反馈，link已点击并采取所需的措施。

我可以使用JavaScript收听click事件和所需的类来提供反馈。但是，只有CSS反馈才会更好。

任何指针都会有很大的帮助。

需要下面的内容。

请参阅此pen以获取所需行为的工作演示/模拟。

Answer 1

使用a元素制作这样的内容很难在不同的浏览器中使用CSS。

以下是使用radio按钮为您提供预期结果的解决方法。

如果您创建一个带有关联标签样式的隐藏单选按钮，就像链接一样。您可以使用CSS伪:checked来提供所需的结果。

这样的代码：

＆＃13;

＆＃13;

input[type=radio] {
    display:none
}

input[type=radio] + label {
    color:blue;
    text-decoration:underline;
    cursor:pointer
}

input[type=radio]:checked + label {
    color:red
}
input[type=radio]:checked + label:after {
    content:url('https://forums.adobe.com/images/jive-image-loading.gif')
}

＆＃13;

  <input type="radio" value="" id="myRadio" />
  <label for="myRadio">
      Click me!
  </label>

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle

============ 以下是我在更新OP之前的答案 ============

css中的

a元素有许多伪选择器。 您可以使用它们来了解链接是否已悬停，已单击，是否已立即单击。

有4个链接状态：

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

请参阅此fiddle以查看正在使用的不同选择器