Замена тега привязки другим текстом с использованием только 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, и страница загружает содержимое DOM через запросы ajax, поэтому использование JS для этих небольших задач в этом сценарии становится очень громоздким.

Answer 1

Вот более чистый способ добиться этого, используя только 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>

Answer 2

попробуйте с этим .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>