설명해주십시오 : content : '';

Question

은 여기에 질문이 코드는 약

.store { 
    display: block; 
    position: relative; 
} 
.store:before, .store:after { 
    display: block; 
    position:absolute; 
    content:''; 
} 
.store:before { 
    background: url(store-before.png); 
    height: 23px; 
    width: 54px; 
    top:-3px; 
    left:-3px; 

} 
.store:after { 
    background: url(store-after.png); 
    height: 20px; 
    width: 41px; 
    bottom:-3px; 
    right:-3px; 
} 

내가 눈치 그 "내용"두 아포스트로피, 이전 및 이미지가 표시되지 않습니다 이후 외에 아무것도 때. 누군가는 두 개의 어포 스트로피의 의미를 설명 할 수 있습니까? 감사.

Answer 1

두 개의 아포스트로피는 문자열을 나타냅니다. 두 개의 큰 따옴표는 문자열을 나타내며 사용하는 구분 기호는 환경 설정 및 이스케이프 요구에 따라 다릅니다. 모든 세부 사항은 here을 참조하십시오.

두 문자열 구분 기호 사이에 아무 것도 없으면 '' 또는 "" 중 하나가 비어있는 문자열입니다. 문자열 외에 다른 값이 있으면 유효하지 않을 수도있는 다른 값입니다. content에 가능한 모든 값은 here을 참조하십시오. 잘못된 값을 전달하면 다른 스타일 선언과 마찬가지로 브라우저에서 값을 무시하고 유효한 값이없는 경우 content은 normal으로 기본 설정되며 이는 :before 및 :after 의사 요소의 경우 실제로는 none입니다. 그러면 의사 요소가 표시되지 않습니다.

Answer 2

CSS2.1 사양의 Generated content, automatic numbering, and lists 절에서는이 설명 :

저자와 함께 스타일과 생성 된 내용의 위치를 ​​지정하려면 : 이전과 : 의사 요소 후. 그 이름에서 알 수 있듯이 : before 및 : after 가상 엘레멘트는 엘레멘트의 문서 트리 내용 앞뒤에 내용의 위치를 ​​지정한다. 이 'pseudo-elements'와 결합 된 'content'특성은 삽입되는 것을 지정합니다.

content은 페이지에 추가 된 내용입니다. content이 지정되지 않으면 아무 것도 페이지에 전혀 추가되지 않습니다 (결국 스타일이 적용되지 않음을 의미). content: ''은 빈 문자열 컨텐트를 페이지에 추가합니다.

Answer 3

before 및 after 요소를 사용하려면 요소를 표시하기 전에 일부 형식의 콘텐츠가 있어야하므로 빈 문자열을 사용하여 거기에 무엇 인 것처럼 가장 할 수 있습니다. 공백 또는 비어있는 경우 아무 것도 표시되지 않습니다. 페이지, 그래서 당신은 단지 당신의 CSS 스타일의 나머지 부분을 얻을.

콘텐츠 속성을 제거하면 전혀 표시되지 않습니다.

"..."또는 "read more"와 같은 용도로 사용하기 위해 HTML 마크 업에 넣지 않고도 상상할 수 있습니다.

Answer 4

특정 코드 스 니펫이이를 지우고 있습니다.

저자 : HTTP의 허클베리 핀