blockquote quotation marks css

Solutions on MaxInterview for blockquote quotation marks css by the best coders in the world

showing results for - "blockquote quotation marks css"
Lili
03 Jan 2017
1blockquote {
2    font-family: Georgia, serif;
3    font-size: 18px;
4    font-style: italic;
5    width: 500px;
6    margin: 0.25em 0;
7    padding: 0.35em 40px;
8    line-height: 1.45;
9    position: relative;
10    color: #383838;
11}
12
13blockquote:before {
14    display: block;
15    padding-left: 10px;
16    content: "\201C";
17    font-size: 80px;
18    position: absolute;
19    left: -20px;
20    top: -20px;
21    color: #7a7a7a;
22}
23
24blockquote cite {
25    color: #999999;
26    font-size: 14px;
27    display: block;
28    margin-top: 5px;
29}
30
31blockquote cite:before {
32    content: "\2014 \2009";
33}
34
Luciano
27 Feb 2016
1blockquote {
2    font-family: Georgia, serif;
3    position: relative;
4    margin: 0.5em;
5    padding: 0.5em 2em 0.5em 3em;
6}
7/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
8blockquote:before {
9    font-family: Georgia, serif;
10    position: absolute;
11    font-size: 6em;
12    line-height: 1;
13    top: 0;
14    left: 0;
15    content: "\201C";
16}
17blockquote:after {
18    font-family: Georgia, serif;
19    position: absolute;
20   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
21    float:right;
22    font-size:6em;
23    line-height: 1;
24    right:0;
25    bottom:-0.5em;
26    content: "\201D";
27}
28blockquote footer {
29    padding: 0 2em 0 0;
30    text-align:right;
31}
32blockquote cite:before {
33    content: "\2013";
34}