How to Replace a content with CSS

Today We will learn How to Replace a content with CSS

Replacing a  content with CSS is not something I utilize frequently, but rather there are some particular situations where it proves to be useful. In the event that you can change message on the server-side, I generally suggest that first. CSS content substitution ought to be a final resort, as that is not what CSS is expected for.

In case you’re working inside the constraints of a CMS, or you don’t be able to change your markup, CSS content Replacing  may be your exclusive choice.

There are a couple approaches to handle it. We should stroll through the alternatives, and clarify how they work, and why different strategies come up short.

N.B.: In the majority of the accompanying illustrations, you could utilize either pseudo-component, :before or :after

Text Replacement with Pseudo-elements & CSS Visibility

A decent contention can be made this is the best strategy. It requires the littlest measure of markup, and functions admirably for the individuals who have practically no power over their HTML markup. Here’s some HTML:

<div class="replaced-content">Original Content</div>

You want to replace “Original Text” with various content. Here’s how you can replace that text using only CSS.

.replaced-content {
visibility: hidden;
position: relative;
}

.replaced-content:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}

Giving visibility a value of hiddenhides a component, however leaves space where it would have been. As it were, it doesn’t change the design of the page. (This is different from display: none;, which we’ll cover below.) This is the reason we have to utilize positioning the pseudo-element.Without absolutely positioning the pseudo-element, the new content would show up after the spot where the first content should be. By using absolute positioning, we can place the new text in exactly the same spot as the original text was supposed to appear.

Text Replacement with Pseudo-elements & CSS Display

This method requires a little extra markup in your HTML, but uses less CSS. Like the example above, it also utilizes a CSS pseudo-element to insert content onto the page. The HTML (note the extra tag that was not in our example above):

With Pseudo-elements & CSS Display This technique requires somewhat additional markup in your HTML, however utilizes less CSS. Like the case above, it additionally uses a CSS pseudo-component to embed content onto the page. The HTML (take note of the additional tag that was not in our case above):

<div class="replaced-content">Original Content</div>

Utilizing the display property, you can hide the content inside the tag, and then attach a pseudo-element with your new content to the

tag. You do not need to use absolute positioning here because display: none;  completely removes the element from the page, and it does affect the layout. It’s as if the text inside the element never existed.
Here’s the CSS:

.replaced span {
	display: none;
}

.replaced:after {
	content: "This text replaces the original.";
}

display: none; will not work without the extra markup

If you didn’t have that extra element (in this case, the tag) inside of your

tag, you cannot use display: none;. Any time you have a parent element with display: none;, all of its child elements, as well as its pseudo-elements, will not be displayed. Even if you set the pseudo-element to display: block;

So, if this is your HTML:

<div class=”replaced-content”>Original Content</div>

Then this CSS will not work:

.replaced { display: none; } .replaced:after { display: block; content: "This text replaces the original."; }

Using Special Characters & Symbols in Replaced Text

You might want to replace text with special characters or symbols, like an ampersand, tilde, emdash or non-breaking space. To do so, you must using the proper character encoding for that symbol. You cannot just place the symbol inside your content: “”;  declaration, nor can you use the HTML code (e.g. &amp;  & or &mdash; ).

This entity conversion chart will convert your special character, and give you the appropriate code to use with the CSS content  property.

If you wanted to insert this: 29.9 = ~30

It would look like this:

content: “29.9 \003D \0020 \007E 30”;

• \003D is the code for an equals sign (=)
• \0020 is the code for a non-breaking space ( &nbsp;  )
• \007E is the code for a tilde (~)

Need to include spaces within each special character code, otherwise the codes run together & CSS doesn’t know where the beginning & end of each code is located.