CSS / 인용문(Blockquote) 꾸미기 – CODING FACTORY

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문을 꾸미는 여러 가지 예제입니다.

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</blockquote>

예제 1

blockquote {
  border: 1px solid #27a9e3;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 20px;
  padding-right: 20px;
  border-left: 10px solid #27a9e3;
}

예제 2

blockquote:before {
  content: "\201C";
  font-size: 3em;
  font-family: Georgia;
  color: #bcbcbc;
  float: left;
  margin: -5px 10px 0px -10px;
}