我如何用CSS替换文本?

我如何用CSS替换文本使用这样的方法:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

而不是(img[src*="IKON. "img"])，我需要使用一些可以代替文本的东西。

我必须使用[]才能让它工作。

< div级= >事实“pvw-title < / div >

我得把"事实"替换掉。

当前回答

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

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

2012-12-18 21:03:52

其他回答

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

2017-03-03 16:34:18

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

2015-11-12 15:05:34

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

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

2012-12-18 21:03:52

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

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

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

2021-06-29 22:42:11

例子

<!DOCTYPE html>
<html> 
<head> 
   <title>Devnote</title>
    <style>
        .replacedValue { 
            visibility: hidden; 
            position: relative; 
        } 
        .replacedValue:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0; 
            content: "Devnote is developer answer solve. devnote.in"; 
        } 
    </style> 
</head>
<body> 
    <p class="replacedValue">Old Text Here</p>
</body> 
</html>

输出

Devnote is developer answer solve. devnote.in

2020-12-09 11:07:33

我如何用CSS替换文本?

推荐文章

最新文章

标签