我如何使用這樣的方法用CSS替換文本:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }而不是(img
之后:
觀看http://jsfiddle.net/ZBj2m/274/的現場演示:
這是我們的綠色按鈕:
<button>Hello</button>
button {
background-color: green;
color: black;
padding: 5px;
}現在讓我們隱藏原始元素，但之后添加另一個block元素:
button {
visibility: hidden;
}
button:after {
content:'goodbye';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}注意:
我們明確需要將它標記為塊元素，默認情況下，“after”元素是內聯的 我們需要通過調整偽元素的位置來補償原始元素。 我們必須隱藏原始元素，并使用可見性顯示偽元素。注釋顯示:原始元素上無不起作用。 如果您愿意使用偽元素并讓它們插入內容，您可以執行以下操作。它不需要了解原始元素，也不需要額外的標記。
.element {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
.element::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}jsdild示例
基于 mikemaccana的回答， 這對我很有效
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}<button>original</button>這是簡單、簡短且有效的方法。不需要額外的HTML。
.pvw-title { color: transparent; }
.pvw-title:after {
content: "New Text To Replace Old";
color: black; /* set color to original text color */
margin-left: -30px;
/* margin-left equals length of text we're replacing */
}對于WooCommerce breadcrumbs，我不得不這樣做來替換鏈接文本，而不是主頁
薩斯/萊斯
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
&:after {
content: "Store";
color: grey;
margin-left: -30px;
}
}半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
}
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
content: "Store";
color: @child-color-grey;
margin-left: -30px;
}為了使用after并隱藏原來的內容，你可以使用這個hack:
.pvw-title {
font-size: 0;
}
.pvw-title:after {
font-size: 1rem;
content: 'I am a totally different piece of text!';
}<div class="pvw-title">Facts</div>你不能，嗯，你可以。
.pvw-title:after {
content: "Test";
}這將在元素的當前內容之后插入內容。它實際上不會替換它，但是您可以選擇一個空的div，并使用CSS添加所有內容。
但是，雖然你或多或少可以，你不應該。實際內容應該放在文檔中。content屬性主要用于小的標記，如應該出現引號的文本周圍的引號。
嘗試使用:before和:after。一個在HTML呈現后插入文本，另一個在HTML呈現前插入。如果要替換文本，請將按鈕內容留空。
本示例根據屏幕寬度的大小設置按鈕文本。
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button:before {
content: 'small screen';
}
@media screen and (min-width: 480px) {
button:before {
content: 'big screen';
}
}
</style>
<body>
<button type="button">xxx</button>
<button type="button"></button>
</body>按鈕文本:
與:之前
大屏幕xxx
寬屏幕
與:之后
xxx大屏幕
寬屏幕
我發現的最簡單的方法是使元素font-size: 0px，然后在創建:after pseudo時用任何字體大小覆蓋它。下面的例子:
.pvw-title {
font-size:0px;
}
.pvw-title:after {
content: "Hello";
font-size:15px !important;
}我比較幸運地將外部元素的font-size: 0和:after選擇器的font-size設置為我需要的值。
如果你只是想顯示不同的文本或圖像，保持標簽為空，并在多個數據屬性中寫入你的內容，就像這樣& ltspan data-text 1 = " Hello " data-text 2 = " Bye " & gt；& lt/span>。。 使用偽類之一顯示它們:before { content:attr(data-text 1)}
現在你有一堆不同的方法在它們之間切換。我把它們和媒體查詢結合起來，用一種響應性的設計方法把導航的名字改成圖標。
jsfiddle演示和示例
它可能無法完美地回答這個問題，但它滿足了我的需求，或許也滿足了其他人的需求。
超文本標記語言
<p class="replaced">Original Text</p>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
.replaced {
visibility: hidden;
position: relative;
}
.replaced:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}這種方法對我的內聯文本有效。它在Firefox、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;
}我用這一招:
.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!';
}試試這個方法:
IDENTIFIER {
visibility: hidden;
position: relative;
}
IDENTIFIER::after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "NEW_CONTENT";
}這實現了一個復選框作為按鈕，根據它的“選中”狀態顯示“是”或“否”。因此，它演示了一種使用CSS替換文本的方法，而無需編寫任何代碼。
就返回(或不返回)帖子值而言，它的行為仍然像一個復選框，但從顯示的角度來看，它看起來像一個切換按鈕。
這些顏色可能不合你的口味，它們只是用來說明一點。
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，所以它應該在其他地方也能工作。
使用偽元素，這種方法不需要了解原始元素，也不需要任何額外的標記。
#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;
}我找到了一個這樣的解決方案，在一個更小的屏幕寬度上，單詞“Dark”將被縮短為“D”。基本上，您只需將原始內容的字體大小設為0，并將縮寫形式作為偽元素。
在本例中，更改發生在懸停時:
span {
font-size: 12px;
}
span:after {
display: none;
font-size: 12px;
content: 'D';
color: red;
}
span:hover {
font-size: 0px;
}
span:hover:after {
display: inline;
}<span>Dark</span>我遇到了一個問題，我必須替換鏈接的文本，但我不能使用JavaScript，也不能直接更改超鏈接的文本，因為它是從XML編譯下來的。此外，我不能使用偽元素，或者當我嘗試過它們時，它們似乎不起作用。
基本上，我把我想要的文本放入一個span中，并把anchor標簽放在它下面，然后把兩者都包裝在一個div中。我基本上是通過CSS將錨標記上移，然后使字體透明。現在，當您將鼠標懸停在跨度上時，它“表現”像一個鏈接。這是一個非常不成熟的方法，但是這就是你如何鏈接不同的文本...
這是我如何繞過這個問題的一把小提琴
我的HTML
<div class="field">
<span>This is your link text</span><br/>
<a 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將需要根據您的要求進行更改，但這是您所要求的一種通用方式。
八年后，當我試圖使用時尚的瀏覽器擴展來改變一個網站(不是我的)上的東西時，我面臨了同樣的挑戰。這一次，我使用“inspect element”查看源代碼，并在此基礎上創建了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>與我在其他每個答案中看到的不同，您不需要使用偽元素來用圖像替換標簽的內容
<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是更標準化(和自動化)的像素替代方案。
CodeSandbox下面有代碼，并以截圖的形式輸出，請務必閱讀代碼下面的說明！
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，你可以很容易地將它擴展到移動設備上。
例子
<!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沒有技巧這是不可能的。這是一種用文本圖像替換文本的方法。
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}這類事情通常是用JavaScript完成的。下面是如何使用jQuery實現這一點:
$('.pvw-title').text('new text');實現這一點的方法是給CSS內容添加行高。這將使塊被隱藏，從而不會隱藏更改的文本。
使用before的示例:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}將原始元素的行高和字體大小設置為0px(然后將:after pseudo元素的字體大小設置為),這是唯一對我有效的方法，不會弄亂元素容器和周圍元素的間距/格式/填充。
#test {
font-size: 0px;
line-height: 0px;
}
#test:after {
font-size: 12px;
content: 'Good Bye';
}<span id="test">Hello</span>