티스토리 스킨 수정에서 인용구 수정안되는 문제

게시물 수정 , 삭제는 로그인 필요

티스토리 스킨을 수정중인데 

코드펜에서 작성하면 아래와같이 보이는데

막상 티스토리 스킨에 적용하면 이렇게 되네요 또한 위에 " 표시도 생기고요

스킨파일이나 스타일시트에서 blockquote 검색해서 다 지우고 제껄로 했는데 왜 안될까요?

특히 ::before이거 적용이 안되네요.

서식파일소스

<blockquote class="gray">
<h6><span class="Cgray">GRAY</span> - Blockquote Color Palette</h1>
<p>Use this class for blockquote layout.</p>
<code>
&lt;blockquote class="<span class="Cgray">gray</span>"&gt;
Some Text...
&lt;/blockquote&gt;
</code>
</blockquote>

스타일시트소스

blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;

/*Font*/
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.2;
color: #666;

/*Box Shadow - (Optional)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;

/*Borders - (Optional)*/
border-left-style: solid;
border-left-width: 5px;
border-right-style: solid;
border-right-width: 2px;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

}


blockquote::before{
content: "\00BB"; /*Unicode for Left Double Quote*/

/*Font*/
font-family: Georgia, serif;
font-size: 50px;
font-weight: bold;
color: #999;

/*Positioning*/
position: absolute;
left: 10px;
top:0px;

}

blockquote.gray{
border-left-color: #ccd1d8;
border-right-color: #aab2bc;
}
.heading{
font-family:Montez;
text-align:center;
font-size:30px;
}

code{
color:#da4453;
}

h6{
text-align:left;
font-size:16px;
font-family: 'Francois One', sans-serif;
}
span.Cgray{
color:#aab2bc;
}