How can I replace text with CSS?

问题:

How can I replace text with css using a method like this:

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

Instead of ( img[src*=\"IKON.img\"] ), I need to use something that can replace text instead.

I have to use [ ] to get it to work.

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

I need to replace \"Facts\".

回答1:

Or maybe you could wrap \'Facts\' round a <span> as follows:

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

Then use:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: \'whatever it is you want to add\';
}

回答2:

Obligatory: This is a hack: CSS isn\'t the right place to do this, but in some situations - eg, you have a third party library in an iframe that can only be customized by CSS - this kind of hack is the only option.

You can replace text through CSS. Let\'s replace a green button with \'hello\' with a red button that says \'goodbye\', using CSS. See http://jsfiddle.net/ZBj2m/274/ for a live demo:

Here\'s our green button:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Now let\'s hide the original element, but add another block element afterwards:

button {
  visibility: hidden;
}
button:after {
  content:\'goodbye\'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Note:

• We explicitly need to mark this as a block element, \'after\' elements are span by default
• We need to compensate for the original element by adjusting the pseudo-element\'s position.
• We must hide the original element and display the pseudo element using visibility. Note display: none on the original element doesn\'t work.

回答3:

If you\'re willing to use pseudo elements and let them insert content, you can do the following. It doesn\'t assume knowledge of the original element and doesn\'t require additional markup.

.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 */
}

JSFiddle Example

回答4:

Based on mikemaccana’s answer, this worked for me

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: \"goodbye\";
  visibility: visible;
}

§ Absolute positioning

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

回答5:

Simple, Short, Effective. No additional html necessary.

.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 */
    }

I had to do this for replacing link text, other than home, for woocommerce breadcrumbs

SASS/LESS

body.woocommerce .woocommerce-breadcrumb > a[href$=\"/shop/\"] {
    color: transparent;
    &:after { 
        content: \"Store\";
        color: grey;
        margin-left: -30px;
    }
}

CSS

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;
}

回答6:

You can\'t, well, you can.

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

This will insert content after the current content of the element. It doesn\'t actually replace it, but you can choose for an empty div, and use CSS to add all the content.

But while you more or less can, you shouldn\'t. Actual content should be put in the document. The content property is mainly intended for small markup, like quotation marks around text that should appear quoted.

回答7:

Try using: before and: after. One inserts text after HTML is rendered, the other inserts before HTML is rendered. If you want to replace text, leave button content empty.

This example sets the button text according to the size of the screen width.

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

Button text:

1) with :before

big screenxxx

big screen

2) with :after

xxxbig screen

big screen

回答8:

This worked for me with inline text. Tested in FF, Safari, Chrome and 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; 
}

回答9:

It may not perfectly answer the question, but it satisfied my needs and maybe others too.

So if you just want to show different texts or images, keep the tag empty and write your content in multiple data attributes like that <span data-text1=\"Hello\" data-text2=\"Bye\"></span>. Display them with one of the pseudo classes :before {content: attr(data-text1)}

Now you have a bunch of different ways to switch between them. I used them in combination with media queries for a responsive design approach to change the names of my navigation to icons.

jsfiddle demonstration and examples

回答10:

I use this trick:

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

I\'ve even used this to handle internationalization of pages by just changing a base class...

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

回答11:

I had better luck setting the font-size: 0 of the outer element, and the font-size of the :after selector to whatever I needed.

回答12:

Using a pseudo element, this method doesn\'t require knowledge of the original element and doesn\'t require any additional markup.

#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;
}

回答13:

Text Replacement with Pseudo-elements & CSS Visibility

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.\";
}

回答14:

This implements a checkbox as a button which shows either Yes or No depending on its \'checked\' state. So it demonstrates one way of replacing text using CSS without having to write any code.

It will still behave like a checkbox as far as returning (or not returning) a POST value, but from a display point of view it looks like a toggle button.

The colours may not be to your liking, they\'re only there to illustrate a point.

The HTML is:

<input type=\"checkbox\" class=\"yesno\" id=\"testcb\" /><label for=\"testcb\"><span></span></label>

...and the CSS is:

/* --------------------------------- */
/* 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;
}

I\'ve only tried it on Firefox, but it\'s standard CSS so it ought to work elsewhere.

回答15:

I had an issue where I had to replace the text of link but couldn\'t use javascript nor could I directly change the text of a hyperlink as it was compiled down from XML. Also, I couldn\'t use pseudo elements, or they didn\'t seem to work when I had tried them.

Basically, I put the text I wanted into a span and put the anchor tag underneath it and wrapped both in a div. I basically moved the anchor tag up via css and then made the font transparent. Now when you hover over the span, it \"acts\" like a link. A really hacky way of doing this, but this is how you can have a link with different text...

This is a fiddle of how I got around this issue

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

My CSS

 div.field a {
     color:transparent;
     position:absolute;
     top:1%;
 }
 div.field span {
     display:inline-block;
 }

The CSS will need to change based off your requirements, but this is a general way of doing what you are asking.

Edit: Can someone tell me why this was downvoted? My solution works...

回答16:

Unlike what I see in every single other answer, you don\'t need to use pseudo elements in order to replace the content of a balise with an image

Facts

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

回答17:

This isn\'t really possible without tricks. Here is a way that works by replacing the text with an image of text.

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

This type of thing is typically done with Javascript. Here is how it can be done with jQuery:

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