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

Question

是否有任何仅 CSS 的解决方案来设置 clicked link 的样式，这可以向用户提供反馈，即 link 已被单击 并采取所需的操作。

---

我可以使用 JavaScript 监听 click 事件和所需的类来提供反馈。然而，如果有反馈，CSS 会更好。

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

需要像下面这样的东西。

请引用这个pen用于所需行为的工作演示/模拟。

Answer 1

很难使用 a 元素来使这样的东西仅在不同的浏览器中使用 CSS 才能工作。

这里有一个解决方法，可以使用 radio 按钮为您提供预期的结果。

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

代码如下:

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')
}

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

这是一个jsfiddle

============ 以下是我更新OP前的回答 ============

a 元素在 css 中有很多伪选择器。 您可以使用它们来了解链接是否悬停、是否已被点击、是否立即被点击。

有四种链接状态:

a:link - 一个普通的、未访问过的链接

a:visited - 用户访问过的链接

a:hover - 用户将鼠标悬停在链接上时的链接

a:active - 单击时链接

查看此 fiddle查看正在运行的不同选择器