How to move a file into a different folder on the server using PHP?

How to replace text with CSS?

Last Updated : 15 Sep, 2024

Replacing text on a webpage is typically done on the server side, but there are situations where you might need to do this directly in CSS. This can be useful when you don’t have server access or are working within certain restrictions. CSS offers a couple of methods to replace text, which we’ll explore here.

Table of Content

Using :after Pseudo-element
Using Pseudo-elements & CSS Visibility

Using :after Pseudo-element

The :after pseudo-element allows you to insert content after the selected element. You can use this technique to replace text by hiding the original text and placing new text in its place.

Steps:

Wrap the Text: Assign a class to the text you want to replace.

<p class="toBeReplaced">Old Text</p>

The text “Old Text” needs to be hidden first and a new text has to be positioned exactly where the old text was. To do so, we change the visibility of this text using CSS to hidden first.

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

Then we add a new text at the exact same position, using the pseudo elements and corresponding explicit positioning.

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

Note: after is the pseudo element in use here. We use the visibility modifier once again to show the new text. The content attribute contains the new text.

Example: Implementation to replace text using :after Pseudo-element

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Using :after Pseudo-element
    </title>
    <style>
        .toBeReplaced {
            visibility: hidden;
            position: relative;
        }

        .toBeReplaced:after {
            visibility: visible;
            position: absolute;
            top: 0;
            left: 0;
            content: "This text replaces the original.";
        }
    </style>
</head>

<body>
    <p class="toBeReplaced">Old Text</p>
</body>

</html>

Output:

Screenshot-2024-01-17-154234

Using Pseudo-elements & CSS Visibility

Another approach involves hiding the original text using a <span> element and displaying new text with the :after pseudo-element.

Steps:

Wrap the original text within a <span> element, serving as a child of the <p> element with the class .toBeReplaced.
Apply display: none; to the <span> element, ensuring the original text is hidden from view.
Utilize the :after pseudo-element on the .toBeReplaced class to insert content that replaces the hidden text.

.toBeReplaced span {
    display: none;
}
.toBeReplaced:after {
    content: "This text replaces the original.";
}

Example: Implementation to replace text using aabove approach.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        Using Pseudo-elements & CSS Visibility
    </title>
    <style>
        .toBeReplaced span {
            display: none;
        }

        .toBeReplaced:after {
            content: "This text replaces the original.";
        }
    </style>
</head>

<body>
    <p class="toBeReplaced"><span>Old Text</span></p>
</body>

</html>

Output:

Screenshot-2024-01-17-154234

By using these CSS techniques, you can effectively replace text on a webpage without needing to modify the server-side code. Whether you choose to utilize the :after pseudo-element or combine pseudo-elements with CSS visibility, these methods offer flexibility and control over how text is displayed.

How to move a file into a different folder on the server using PHP?

N

Nilarjun

Improve

Article Tags :

Similar Reads

How to set inner text shadow with CSS ?

CSS is a style sheet language that describes the document's presentation written with HTML or similar markup languages. In this tutorial, we are going to learn how to set inner text shadows with CSS. Approach: Text shadow is used to design the text elements such as paragraphs, headings, etc. We firs

How To Rotate Text In CSS?

The transform: rotate() and writing-mode property in CSS are used to rotate text to a specified angle. By setting an angle like rotate(45deg), you can control the orientation of text, adding visual interest or fitting unique layout needs. 1. Using transform PropertyIn this approach, we are using the

How to Place Text Over an Image using CSS?

Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image. Below are the appr

How to italicize text in CSS ?

Here are the approaches to italicize text in CSS: Using the font-style PropertyThe CSS font-style property is the most straightforward way to italicize text. [GFGTABS] HTML <html> <head> <style> .italic-text { font-style: italic; } </style> </head> <body> <p cl

How to place text on image using HTML and CSS?

To place text on an image using HTML and CSS, you can use different techniques to make the text look good and easy to read. Here, we will explore two approaches for placing text over an image using simple HTML and CSS. 1. Using Absolute Positioning This approach uses absolute positioning to place th

How to Find and Replace Text in MS Word?

MS-Word is a powerful word processing application, used to create documents, articles, assignments, etc. with the help of features and tools provided by it. It is used to perform many operations and creating or editing files and documents. MS Word is popular in the market because of its wide variety

How to Add a Gradient Overlay to Text with CSS?

Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text. Table of Content Approach 1: Using background-clipApproach 2: Using a MaskApproach 3: Using SVGGradient Overlay to Text using back

How to Change <span> Text with jQuery?

Changing the text of a span element in jQuery involves dynamically updating the content displayed within a <span> tag. This capability is often used in web development to reflect real-time changes, respond to user actions, or update information without reloading the entire page. jQuery text()

How to Create a Responsive Text using CSS ?

This article will show you how to create responsive text with HTML and CSS. Responsive text means the text size will change in different screen sizes. We can create Responsive Text using CSS Media Query or using viewport width (vw). Example 1: In this example, we will create a responsive text using

How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi