我有一个问题，我必须替换链接的文本，但我不能使用JavaScript，也不能直接更改超链接的文本，因为它是从XML编译下来的。此外，我不能使用伪元素，或者当我尝试它们时，它们似乎不工作。

基本上，我把我想要的文本放到一个span中，把锚标签放在它下面，并在div中包装。我基本上通过CSS向上移动锚标签，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像一个链接一样“起作用”。这是一种非常粗糙的方法，但这就是你如何使用不同文本的链接…

这是我是如何解决这个问题的

我的HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

我的CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

CSS将需要根据您的需求进行更改，但这是完成您要求的一般方法。

如果您愿意使用伪元素并让它们插入内容，您可以执行以下操作。它不假设原始元素的知识，也不需要额外的标记。

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

JSFiddle例子

我有一个问题，我必须替换链接的文本，但我不能使用JavaScript，也不能直接更改超链接的文本，因为它是从XML编译下来的。此外，我不能使用伪元素，或者当我尝试它们时，它们似乎不工作。

基本上，我把我想要的文本放到一个span中，把锚标签放在它下面，并在div中包装。我基本上通过CSS向上移动锚标签，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像一个链接一样“起作用”。这是一种非常粗糙的方法，但这就是你如何使用不同文本的链接…

这是我是如何解决这个问题的

我的HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

我的CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

CSS将需要根据您的需求进行更改，但这是完成您要求的一般方法。

为了在使用后隐藏原始内容，你可以使用这个hack:

.pvw-title { 字体大小:0; ｝ .pvw-title:{后 字体大小:1快速眼动; 内容:“我是一段完全不同的文字!”; ｝ < div class = " pvw-title”>事实< / div >

将font-size设置为0会使文本消失，而不会从视口中移除实际的元素。因此，:after选择器可以工作，并且应该在所有浏览器上显示。

使用伪元素，该方法不需要原始元素的知识，也不需要任何额外的标记。

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

与我在其他每个答案中看到的不同，您不需要使用伪元素来将标记的内容替换为图像

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }