我想用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执行此小任务变得非常麻烦。
试试这个.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>
这是一种使用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>