Align ending quotes to left 2 - 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 2

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   margin:0;
   padding:0;
   border:0;
   font-size:100%;
   vertical-align:baseline;<!--from  w  ww .ja  v a2s  .  c o  m-->
   background:transparent;
   font-size:15px;
}

body
 {
   background-color:Chartreuse;
   font-size:15px;
}

blockquote {
   line-height:131%;
   margin-bottom:11px;
   padding:11px 11px 2px 11px;
   background-color:yellow;
   quotes:'\202C' '\202D';
}

blockquote p {
   display:inline-block;
   padding:0px 11px 15px 11px;
   margin:0;
}

blockquote p:before {
   content:open-quote;
}

blockquote p:after {
   content:close-quote;
   bottom:-0.26em;
}

blockquote p:before, blockquote p:after {
   font-family:'Times New Roman';
   display:inline-block;
   font-weight:bold;
   color:blue;
   font-size:5em;
   vertical-align:text-top;
   position:relative;
}
</style> 
 </head> 
 <body> 
  <blockquote> 
   <p>this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. </p> 
  </blockquote>  
 </body>
</html>

Related Tutorials