我如何用CSS替换文本?

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

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

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

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

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

我得把"事实"替换掉。

当前回答

我用了这个技巧:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

我甚至用它来处理页面的国际化，只需要改变一个基类…

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

2015-07-05 12:16:48

其他回答

我用了这个技巧:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

我甚至用它来处理页面的国际化，只需要改变一个基类…

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

2015-07-05 12:16:48

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

2015-03-21 20:48:26

例子

<!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

很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了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，你可以很容易地将其扩展到移动设备。

2020-06-12 20:38:03

这实现了一个复选框作为按钮，根据它的“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

我如何用CSS替换文本?

推荐文章

最新文章

标签