仅使用CSS替换不同文本的锚标记

Question

我想用CSS替换一些不同文本的锚标签。我已经尝试过使用CSS伪元素但是使用它会将新文本放在锚标记内，这不是预期的。我想替换整个锚标记，以便新文本不会有任何链接。

原始代码：

<a href="www.google.com" class="link-class">The google link</a>
<a href="www.yahoo.com" class="link-class">The yahoo link</a>
<a href="www.so.com">Don't replace this</a>
<a href="www.ddgo.com" class="link-class">The ddgo link</a>

更换后：

Replacement text
Replacement text
<a href="www.so.com">Don't replace this</a>
Replacement text

我试过这个：

.link-class {
  visibility: hidden;
  position: relative;
}
.link-class:after {
  visibility: visible;
  content: 'Replacement text';
  position: absolute;
  left: 0;
  top: 0;
}

<a href="www.google.com" class="link-class">The google link</a>
    <a href="www.yahoo.com" class="link-class">The yahoo link</a>
    <a href="www.so.com">Don't replace this</a>
    <a href="www.ddgo.com" class="link-class">The ddgo link</a>

简而言之，我不想要替换文本的超链接，我怎么能只使用CSS呢？

---

我通过我的extension为特定页面执行此操作，并且页面通过ajax请求加载它的DOM内容，因此在此场景中使用JS执行此小任务变得非常麻烦。

Answer 1

试试这个.link-class:after

  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;

.link-class {
  visibility: hidden;
  position: relative;
}

.link-class:after {
  visibility: visible;
  content: 'Replacement text';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="www.google.com" class="link-class">The google link</a>
<a href="www.yahoo.com" class="link-class">The yahoo link</a>
<a href="www.so.com">Don't replace this</a>
<a href="www.ddgo.com" class="link-class">The ddgo link</a>

Answer 2

这是一种使用CSS实现此目的的更简洁方法。

.link-class {
  font-size: 0;
  pointer-events: none;
  visibility: hidden;
  text-decoration: none;
  color: inherit;
}

.link-class:after {
  content: 'Replacement text';
  visibility: visible;
  font-size: 16px;
}

<a href="www.google.com" class="link-class">The google link</a>
<a href="www.yahoo.com" class="link-class">The yahoo link</a>
<a href="www.so.com">Don't replace this</a>
<a href="www.ddgo.com" class="link-class">The ddgo link</a>