How to change text using CSS - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to change text using CSS

In this article I am going to explain how to change/alter the text using CSS.


Description:
Here in this tutorial I am going to tell you how we can change the text of div, span, button etc. using CSS. We use CSS Pseudo-elements (::after or :after).

Implementation:

HTML Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS Tricks</title>

    <style>
        .btnsubmit {
  text-indent: -9999px;
  line-height: 0;
}

.btnsubmit::after {
  content: "Click Here";
  text-indent: 0;
  display: block;
  line-height: initial;
}

    .div1 {
  text-indent: -9999px;
  line-height: 0;
}

.div1:after {
  content: "Sql server article";
  text-indent: 0;
  display: block;
  line-height: initial;
}

.div2 span{
   display:none;
}
.div2:after{
   content: "Sql server tutorial";  
} 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <fieldset>
    <legend>change text using CSS </legend>
    <button class="btnsubmit">Submit</button>
      <br />
     <div class="div1">Asp.net article</div>
     <br />
    <div class="div2"><span>Asp.net tutorial</span></div>
    </fieldset> 
    </div>
    </form>
</body>
</html>




What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon