In the below example, we will learn how to change div text to another text by using css with the help of pseudo elements, visibility modifier and absolute positioning methods.
Sometimes we need to change a particular text in the dynamic contents, for this no need to open the server side to change this and it may affect that loop contents also. So that, CSS method is very useful and simple way to solve this.
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to change div text using css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.text-replace {
visibility: hidden;
position: relative;
}
.text-replace:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original text.";
}
</style>
</head>
<body>
<p class="text-replace">Old Text</p>
</body>
</html> Output:
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example