如何用CSS替换文本？

8年后，当我尝试使用“时尚的”浏览器扩展程序来更改网站（而非我的网站）上的内容时，遇到了同样的挑战。这次我通过使用“检查元素”查看源代码来使其工作，并基于此创建了CSS代码。

这是以前的样子：

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

这是用于修改样式的HTML和CSS的同一部分：

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

您可以运行上面的代码，您会看到它有效（在Chrome中测试）。

这正是我问这个问题的时候想要的。我使用的是类似社区博客/ myspace的东西，而样式设置文件时您唯一拥有的就是CSS编辑器，这就是为什么我想根据样式选择它的原因。

在这里找到答案：

高级CSS选择器-根据样式进行选择

CSS选择器的内联样式属性

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

基本上，我将想要的文本放入跨度中，并将锚标记置于其下方，并将二者都包裹在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将需要根据您的要求进行更改，但这是您所要执行的一般方法。

编辑：有人可以告诉我为什么这被否决了吗？我的解决方案有效...

与我在其他每个答案中看到的不同，您无需使用伪元素即可用图像替换阳台的内容

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

使用伪元素，此方法不需要了解原始元素，也不需要任何其他标记。

#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;
}

这实现了一个复选框作为按钮，根据其“已选中”状态显示是或否。因此，它演示了一种使用CSS替换文本而无需编写任何代码的方法。

就返回（或不返回）POST值而言，它的行为仍像复选框一样，但是从显示角度看，它看起来像一个切换按钮。

颜色可能不符合您的喜好，它们只是用来说明问题。

HTML是：

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

...而CSS是：

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

我只在Firefox上尝试过，但是它是标准的CSS，因此应该可以在其他地方使用。

用伪元素替换文本和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.";
}

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

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

现在，您可以使用多种方法在它们之间进行切换。我将它们与媒体查询结合使用，以进行响应式设计，从而将导航名称更改为图标。

jsfiddle演示和示例

我有更好的运气设置font-size: 0外的元素，而font-size在的:after，我需要什么选择器。

这对我有用内联文本。经过FF，Safari，Chrome和Opera的测试

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>


span {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px; 
}

span:after {
content: "goodbye";
visibility: visible;
word-spacing:normal;
letter-spacing:normal; 
}

根据 mikemaccana的回答，这对我有用

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

绝对定位

绝对定位的元素将从流中移出，因此在放置其他元素时不占用空间。