Sunday, October 16, 2016

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>




No comments:

Post a Comment