CSS: Style <a> tags to look like plain text

Question

How can I style an anchor tag to look exactly like plain text? For example, I have:

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

What I have tried so far is:

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

However, with this styling, the 'link' text will still show the default cursor (i.e. the arrow) when you hover over it, as opposed to the 'text' cursor which shows up on the rest of the text in the <p> tag. How can I make all of it have the text cursor and still have the link not be clickable?

I would like to avoid using jQuery, or even JavaScript at all if possible.

Answer 1

One solution would be to add cursor:text to the parent p element. (example)

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

---

Alternatively, a less optimal solution would be to overlay a pseudo element, thus preventing it from being clickable (example). The down-side to this solution is that nothing within the paragraph would be clickable. This would therefore not work if you wanted normal links in the same paragraph element.

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

As a side note, I'd suggest using the value inherit for the link's color. In doing so, it will match the parent element's color if it happens to change... like this.