这实现了一个复选框作为按钮，根据它的“checked”状态显示Yes或No。因此，它演示了一种使用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，所以它应该在其他地方工作。

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

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

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

很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了flexbox和rem的优势，即。

您不希望手动定位要更改的文本，这就是为什么您希望利用flexbox 您不希望显式地使用px对文本使用填充和/或边距，这对于不同设备和浏览器上的不同屏幕大小可能会给出不同的输出

这里是解决方案，简而言之，flexbox确保它自动定位完美，rem是更标准化(和自动化)的像素替代方案。

codeandbox带有下面的代码，并以截图的形式输出，请务必阅读下面的代码说明!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

注意:对于不同的标签，你可能需要不同的rem值，这个值只适用于h1，并且只适用于大屏幕。但是使用@media，你可以很容易地将其扩展到移动设备。

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

如果没有技巧，这是不可能的。这里有一种通过用文本的图像替换文本的方法。

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:

$('.pvw-title').text('new text');

或者你可以把'Facts'包在<span>上，如下所示:

.pvw-title span { 显示:没有; ｝ .pvw-title:{后 内容:“你想加什么就加什么”; ｝ < div class = " pvw-title " > < span >事实< / span > < / div >