Question

有没有办法在CSS中执行此操作？为了澄清我只能访问CSS，HTML代码如下所示。所以我不能使用span或链接文本周围的任何其他标签

这

<a href="something.com">example text</a>

要

<a href="something.com">something else</a>

Answer 1

是的，就像这样：

body {
  /* just for demo */
  text-align: center;
  margin: 1em;
}
a {
  visibility: hidden;
  font-size: 0;
  /* collapse extra space */
}
a::before {
  content: "Now I'm This";
  visibility: visible;
  font-size: 16px;
  /* reset font size */
  font-weight: bold;
}

<p>Lorem ipsum dolor sit.<a href="something.com">I was This</a>Lorem ipsum dolor sit.</p>

Answer 2

纯CSS方式是使用伪选择器:before或:after和content属性。

修改：隐藏不包含<span>

的上一个文字

＆＃13;

/* demo */
a { background:blue; text-align: center; color:#FFF; display:inline-block; padding:1em; }

/* hide original text */
a {
  position:relative;
  color:transparent;
}

/* new text with psuedo selector */
a:before {
  position:absolute;
  display:block;
  content: "something else";
  color:#FFF;
  z-index:1;
  left:0;
  right:0;
  font-size:initial;
}

＆＃13;

<a href="#">something</a>

＆＃13;

<强>解释

首先，我们通过使文本颜色透明来隐藏原始文本。
然后我们使用具有可见颜色的伪选择器（在我的示例中为白色）添加新文本

使用position: absolute确保新文本超出原始文本。

Answer 3

使用CSS更改内容有点古怪

您可以按如下方式使用javascript：

document.getElementById("demo").innerHTML = "Another text"

<a id="demo" href="something.com">example text</a>

有没有办法在CSS中更改链接文本？

3 个答案: