仅使用CSS将锚标签替换为其他文本

时间:2018-09-04 10:17:33

标签: html css css3 google-chrome-extension

我只想使用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进行此小任务变得非常麻烦。

2 个答案:

答案 0 :(得分:3)

尝试使用此.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>

答案 1 :(得分:0)

这是使用仅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>