텍스트 주위에 큰 따옴표로 묶기 이미지

Question

단락에 텍스트를 추가하고 있습니다. 텍스트 (이미지)를 따옴표로 묶고 싶습니다.

<p class="aboutus" style="font-style: impact;font-size: medium"> 
test test test test test test test test test test test test test test test test . 
</p> 

텍스트 주위에 큰 따옴표를 추가하려면이 방법이 유용합니다.

p.aboutus:before { 
    content: '"'; 
} 

p.aboutus:after { 
    content: '"'; 
} 

하지만 지금은 이미지 (quote1.jpeg 및 quote2.jpeg)에서 따옴표를 가지고 있고, 나는 의사 선택기에서 <img src>를 추가하는 경우, 그것이 작동하지 않는 경우. 왜 안돼?

Answer 1

당신은 url() 구문을 사용하여 이미지를 지정해야합니다 URL이 포함하는 스타일 시트의 위치와 관련이 있음을

가

p.aboutus::before { 
    content: url('../images/quote1.jpeg'); /* Or wherever it is */ 
} 

p.aboutus::after { 
    content: url('../images/quote2.jpeg'); 
} 

참고; 귀하의 페이지가 아닙니다.

Answer 2

매우 특별한 스타일을 필요로하지 않는 한, 이미지가 아닌 따옴표로 일반 텍스트를 사용하는 것이 적합 할 수 있습니다.

여기에 각각 JSFiddle demo이 있습니다.

첫 번째는 일반 텍스트를 사용하고 두 번째 이미지는 이미지를 사용합니다. 외관상 거의 동일합니다 (IE8/9/10, FF, Safari, Chrome, Opera). 둘 다 큰 이미지가 인라인으로 추가 될 때 발생하는 첫 번째 및 마지막 텍스트 줄의 줄 높이에 영향을주지 않고 모든 크기의 따옴표를 표시 할 수 있습니다.

아래는 코드의 간략한 버전입니다 (자세한 내용은 demo 참조).

일반 텍스트

.text-quotes blockquote { 
    position: relative; 
    margin: 0; 
    padding: 8px 0 22px 0; 
    text-indent: 36px; 
} 
.text-quotes blockquote:before, 
.text-quotes blockquote:after { 
    position: absolute; 
    font-size: 60px; 
} 
.text-quotes blockquote:before { 
    content: '\201C'; /* Left double quote */ 
    left: -36px; 
    top: 8px; 
} 
.text-quotes blockquote:after { 
    content: '\201D'; /* Right double quote */ 
    right: 0; 
    bottom: -13px; 
} 

이미지

.image-quotes blockquote { 
    position: relative; 
    margin: 0; 
    padding: 8px 0 22px 0; 
    text-indent: 36px; 
} 
.image-quotes blockquote:before, 
.image-quotes blockquote:after { 
    display: block; 
    position: absolute; 
    width: 27px; 
    height: 21px; 
} 
.image-quotes blockquote:before { 
    content: url(http://www.forestpath.org/test/misc/double-quote-left.png); 
    left: -35px; 
    top: 0; 
} 
.image-quotes blockquote:after { 
    content: url(http://www.forestpath.org/test/misc/double-quote-right.png); 
    right: 35px; 
    bottom: 0; 
}