How can I replace text with CSS?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

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