CSS：样式<a> tags to look like plain text</a>

Question

如何将锚标记设置为与纯文本完全相同？例如，我有：

<p> Here is some text and here is a 
   <a class='no-link' href="http://www.example.com" >link</a></p>

到目前为止我尝试的是：

.no-link{
  pointer-events: none;
  cursor: text;
  text-decoration: none;
  color: black;
} 

但是，使用这种样式，当您将鼠标悬停在其上时，“链接”文本仍将显示默认光标（即箭头），而不是显示在文本中其余文本上的“文本”光标。 <p>标记。如何使所有文本光标和仍然链接不可点击？

我想尽可能避免使用jQuery，甚至JavaScript。

Answer 1

一种解决方案是将cursor:text添加到父p元素。 (example)

p {
    cursor:text;
}
.no-link {
    color:inherit;
    text-decoration:none;
    pointer-events:none;
}

---

或者，不太理想的解决方案是覆盖伪元素，从而防止它被点击(example)。该解决方案的缺点是该段落中的任何内容都不可点击。因此，如果您想要在同一段落元素中使用普通链接，那么这将无效。

p:after {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    cursor:text;
}

作为旁注，我建议使用值inherit作为链接的颜色。这样做，如果它发生变化，它将匹配父元素的颜色......如this。