html - 仅使用 CSS 将 anchor 标记替换为不同的文本

标签 html css google-chrome-extension

我想仅使用 CSS 将 anchor 标记替换为一些不同的文本。 我曾尝试使用 CSS 伪元素,但使用它会将新文本放入非预期的 anchor 标记内。我想替换整个 anchor 标记,以便新文本不会有任何链接。

原代码:

<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 来完成这个小任务变得非常麻烦。

最佳答案

试试这个 .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>

关于html - 仅使用 CSS 将 anchor 标记替换为不同的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52164000/

相关文章:

javascript - 检测事件标签是 Chrome 扩展中的一个新标签

加载页面时 JavaScript 未运行`

css - 为什么我的背景图像重复大约 1 像素宽度,但没有重复?

html - 制作背景 100%

google-chrome-extension - Chrome 扩展 - 如何访问本地文件 ://with manifest v3

javascript - 如何使用 javascript 将带有 base64 src 的图像保存到 Google 驱动器?

php - 如何使用日期选择器的值选择数据库中的数据?

html - 整页白色背景预加载器在链接单击时淡入(示例)

html - 防止笔画边框溢出路径

css - angular2 material md-radio垂直