Align ending quotes to left - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Quote

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Quote

Description

Align ending quotes to left

Demo Code

ResultView the demo in separate window 

<!--<!-- w ww.  j a  va  2s .  c om-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <style>
body
{
   background-color: White;
   font-size: 14px;
}
blockquote { quotes: '\201C' '\201D'; }
blockquote {
   margin-bottom: 10px;
   padding: 16px 10px 13px 10px;
   background-color: #eeeeee;
}
blockquote:before {
   float:left;
   content: open-quote;
}
blockquote:after {
   margin-right: auto;
   margin-left: 170px;
   content: close-quote;
   position: relative;
   top: -20px;
}
blockquote:before, blockquote:after {
   font-weight: bold;
   color: #cccccc;
   font-size: 4em;
}
p {
   margin-bottom: 1em;
}
blockquote {line-height: 130%;
margin-bottom: 10px;
padding: 10px 10px 1px 10px;
background-color: #eeeeee;
}

      </style> 
   </head> 
   <body> 
      <blockquote> 
         <p>ebug what is being posted ebug being posted ebug what is being posted ebug what is being posted ebug what is being posted ebug what is being posted </p> 
      </blockquote>  
   </body>
</html>

Related Tutorials