인용문(blockquote) 스타일링

인용문(Blockquote) 스타일링 예제

다음은 인용문을 꾸미는 몇 가지 예제입니다.

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

 

예제 1

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

 

예제 2

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

 

예제 3

blockquote {
  background: url(//bit.ly/3sGEVx3) no-repeat;
  color: #bcbcbc;
  font-size: 1.5em;
  font-style: italic;
  padding: 24px 24px 24px 56px;
}