这实现了一个复选框作为按钮，根据它的“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，所以它应该在其他地方工作。

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

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

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

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

我找到了一个这样的解决方案，在较小的屏幕宽度上，一个单词“Dark”将被缩短为“D”。基本上，您只需使原始内容的字体大小为0，并将缩短的形式作为伪元素。

在这个例子中，改变发生在hover上:

跨度{ 字体大小:12 px; ｝ 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; ｝ 跨度:{徘徊 字体大小:0 px; ｝ 跨度:徘徊:{后 显示:内联; ｝ 黑暗< span > < / span >

我比较幸运地将外部元素的font-size: 0和:after选择器的font-size设置为我需要的任何东西。

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

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

Jsfiddle演示和示例

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

你不能，嗯，你可以。

.pvw-title:after {
  content: "Test";
}

这将在元素的当前内容之后插入内容。它实际上并不替换它，但您可以选择一个空的div，并使用CSS添加所有的内容。

虽然你或多或少可以，但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记，比如文本周围的引号应该被引用。