Question

我需要更改链接的内容，但我只能更改我正在处理的页面的CSS。我尝试使用content和:before伪元素中的:after属性。但我没有找到用新的替换价值的方法。我只能在开头和结尾处将内容附加到标签之间指定的值，而不是像我需要的那样完全替换它。

a:before {
  content: 'ciao 1'
}

a:after {
  content: 'ciao 2'
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>

如何实际“替换”链接标记的内容？

Answer 1

使用--no-sandbox这样的技巧：

＆＃13;

font-size

＆＃13;

a {
  font-size: 0;
}

a:before {
  content: 'ciao 1';
  font-size: initial;
}

＆＃13;

或<a href="https://www.w3schools.com/css/">CSS Tutorial</a>喜欢这样：

＆＃13;

visibility

＆＃13;

a {
  visibility: hidden;
}

a:before {
  content: 'ciao 1';
  visibility: visible;
}

＆＃13;

Answer 2

有可能，虽然它有点hacky。但话说回来：无论如何，通过CSS改变内容是一种hacky。您可以将实际链接的字体大小（<a>）设置为0px，然后“重置”伪元素的字体大小。

a{
  font-size: 0px;
}
a:before,
a:after{
  font-size: 16px;
}
a:before {
  content: 'ciao 1'
}

a:after {
  content: 'ciao 2'
}

<a href="https://www.w3schools.com/css/">CSS Tutorial</a>