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

Question

是否有任何 CSS 唯一的解决方案来设置 clicked link 的样式，可以向用户提供反馈，即 link已被点击并采取了所需的行动。

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

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

需要如下内容。

请参考此 pen 以获得所需行为的工作 demo/simulation。

Answer 1

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

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

如果您制作一个带有关联标签样式的隐藏单选按钮，就像 link。您可以使用 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 中的元素有很多伪选择器。您可以使用它们来了解 link 是否悬停、是否被点击、是否立即被点击。

有 4 个 link 状态：

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 以查看这些不同的选择器的作用

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

Style a clicked link - Any CSS only solution?

css

click

hyperlink