我有一个问题，我必须替换链接的文本，但我不能使用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将需要根据您的需求进行更改，但这是完成您要求的一般方法。

这简单、简短、有效。不需要额外的HTML。

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

我不得不这样做替换链接文本，除了家，为WooCommerce面包屑

Sass /少

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

文本替换伪元素和CSS可见性

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

我发现的最简单的方法是使元素font-size: 0px，然后在创建:后pseudo时用任何字体大小覆盖它。在下面的例子:

.pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

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

.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例子

如果您只是想显示不同的文本或图像，请保持标记为空，并将内容写入多个数据属性，如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}

现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用，以实现响应式设计方法，将导航的名称更改为图标。

Jsfiddle演示和示例

它可能不能完美地回答这个问题，但它满足了我的需求，也许也满足了其他人的需求。