Example 01
Let’s get started with the use of “after” offset to replace one text with a new text. To create an HTML webpage, we will be utilizing all its standard tags. The very first and main tag is html tag, and all the other content of tags came within it. So, we need to make sure that the opening and closing of this tag don’t miss our code. We have started this tag, followed by the “head” tag that has been a must to perform header styling and other things. We have been adding the style tag to it. You can also try out the “title” tag within it before the style tag to give your HTML page a simple name.
Within the body area of our HTML page, all the other elements would be added between the “body” tag opening and closing, i.e., <body> and </body>. We have been using the <p> tag to add a paragraph to our HTML page body. This <p> tag has been classified with a class “replace” to use for styling. The </p> tag is used to close this tag after adding some text data to it. The style tag has been used within the “head” tag, and the class “.replace” has been used to add styling to the paragraph of this page. The visibility property is set to “hidden” while its position has been set to relative according to the start of a page. The “after” offset has been used at the next line for the particular class to change its visibility to “visible” and position to “absolute”. This means that after the original text, the new text will be visible, and its position will be absolute.
The top and left margin has been set to 0, while the content property is used to add some other text in place of the original text. Due to replacement, the original text will be hidden as per the “visibility” set to “hidden”. Now we can run our code as it’s complete.
Now, we have got the shown-below result on the browser tab. You can see that the original text was “I will be replaced,” while the shown text is “I am a new text…”. It indicates that the use of the visibility property to “hidden” and “visible” along with the “content” property can make you replace one text with another.
Example # 02
Let’s take a look at another example of HTML to use the “after” offset without the “visibility” property and see if it replaces the text or not. So, we have been using the same html opening and closing tags to create a standard HTML file for execution on the browser. Within the “body” tag of this HTML code, we have been using the <p> tag to create a paragraph in our HTML page and assigned it a class “replace” for classification on the styling level. This paragraph also contains a span tag along with text in it to markup the text in it. The span and paragraph tags are closed one after another.
After this, we closed the body tag as well. The style tag uses the class “replace” for the span tag to use the property “display” as none. This means that no markup will be applied to text within the span. The offset “after” has been used with the “replace” class to add the property “content” with some new text to replace the old text within the paragraph tag of our HTML body. This code is now ready for execution.
After execution of this code in the Chrome browser via the Visual Studio code “Run” menu, we have got the replaced text instead of the original one on the HTML page.
Example # 03
Within this example, you will understand the method to replace the text over hovering. The body part of this code contains a simple heading tag “h1” to add a standard largest size of heading in the HTML webpage upon execution. After closing the heading tag as “</h1>, we have added a “div” tag to create a new container within the HTML page. This container would contain an anchor tag to add a link to some text, i.e., Google’s URL has been used for linking. The heading tag has been used to create a heading of size 2, followed by the span tag with text in it for markup. The heading tag, anchor tag, and the “div” tag have been completed here. So, we have closed all these 4 tags using their closing tags i.e. </span>, </h2>, </a>, </div>.
After this, we don’t need anything yet to be used for this HTML page. Thus, we have been closing the body as well, i.e., using the </body> tag. The anchor tag sign followed by the “hover” offset has been used to its child “span” tag to set the display to none. The “visited” offset is used to tell that the color of a link would be green on page visits. The “before” offset is used on hover to replace the original content with the new content after hovering, i.e., “Click here to visit Google”. On hovering over the original text, the color of a new text will be changed to crimson. If you press the left key upon hovering over the original text without releasing the key, the active offset will change the color of a new text to blue. The style and head tags are now closed.
After running this code via VS code in Chrome, we have got a heading and a link to Google. The underlined link is shown in green color.
When you hover your mouse pointer on the text “Tap on Me,” its text has been replaced with a new one, and the color of the new text is also updated, i.e., crimson. When you tap on the link without releasing the button, it will change its color to blue for sure.
Conclusion
We are done with the illustrations and explanation of the CSS text replacement concept within the HTML scripting. We have implemented a total of 3 examples in HTML to replace one text with another. For this, we have discussed the use of the “after” offset along with its visibility property, position property, and content property. After this, we have also implemented the method to replace a text of some link with another text along with its color change via the hover tags followed by the “before” offset and content property.
