How to change text using CSS - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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.


EmoticonEmoticon