>  기사  >  웹 프론트엔드  >  ::before는 무엇을 하나요? ::before와 :before의 차이점은 무엇인가요?

::before는 무엇을 하나요? ::before와 :before의 차이점은 무엇인가요?

青灯夜游
青灯夜游원래의
2018-11-12 10:31:1148417검색

::이전은 무엇인가요? 그것은 무엇을 합니까? 이 글에서는 ::before의 사용법과 ::before의 간단한 사용법, ::before와 :before의 유사점과 차이점을 알려드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. ::비포란? 그것은 무엇을 합니까?

CSS에서 ::before는 생성된 콘텐츠 요소를 나타내고 해당 요소의 추상화 가능한 스타일의 첫 번째 하위 요소, 즉 선택한 요소의 첫 번째 하위 요소를 나타내는 의사 클래스 요소입니다. . [추천 관련 영상 튜토리얼: css 튜토리얼]

:before를 사용하면 요소의 다른 컨텐츠 앞에 삽입할 컨텐츠를 삽입하고 기본적으로 인라인으로 표시할 수 있습니다. ::before에는 콘텐츠 값을 지정하는 콘텐츠 속성이 필요합니다. 예:

/* 在链接之前添加一颗心 */
a::before {
  content: "♥";
}

간단한 예를 살펴보겠습니다.

일부 텍스트가 포함된 인용구가 있다고 가정해 보겠습니다. ::before를 사용하여 실제 텍스트 앞에 내용을 삽입할 수 있습니다(예: 멋진 인용문). 인용문은 페이지에 표시되지만 DOM의 인용문에는 추가되지 않습니다.

< blockquote >
    你目前的情况并不能确定你可以去哪里; 他们只是决定你从哪里开始。- Nido Qubein
</ blockquote >

다음 코드 조각은 블록 따옴표::before를 사용하여 몇 가지 멋진 따옴표를 추가합니다. 따옴표는 인용된 텍스트 앞의 블록 인용에 추가되고 그 안에 인라인으로 추가됩니다.

blockquote :: before {     
  content:“\ 201C” ;    / *样式引用* /     
  color:deepPink;    
  font-size: 3em;    
  position: relative;    
  top: 20px;
}

콘텐츠 참조는 속성 내에 정의된 유니코드 값을 이스케이프하여 만들어집니다. 이것이 일반적으로 CSS를 통해 글리프가 표현되고 추가되는 방식입니다.

실행 효과를 살펴보겠습니다.

::before는 무엇을 하나요? ::before와 :before의 차이점은 무엇인가요?

의사 요소를 사용하여 삽입된 콘텐츠는 DOM에 삽입되지 않으므로 일반적으로 브라우저의 개발자 도구를 사용하여 삽입된 콘텐츠를 보고 검사하는 것이 불가능합니다. 그러나 Chrome 32+ 및 Firefox용 Firebug를 사용하면 DOM에서 의사 요소가 있는 위치를 확인할 수 있으며, 이를 선택하면 CSS 패널에서 이와 관련된 스타일을 볼 수 있습니다. Chrome의 개발자 도구에서 위 데모를 검사하면 다음과 같은 결과가 표시됩니다.


::before는 무엇을 하나요? ::before와 :before의 차이점은 무엇인가요?

보시다시피 ::before로 추가된 콘텐츠는 인용부호 내의 다른 콘텐츠와 인라인이며 앞에 있습니다.

::before 콘텐츠가 요소 내의 다른 콘텐츠보다 먼저 삽입되므로 이는 의사 요소가 소스 트리의 다른 요소 뒤에 쌓이게 된다는 의미이기도 합니다.

의사 요소는 문자(위에서 언급한 대로), 텍스트 문자열 및 이미지를 포함하여 거의 모든 유형의 콘텐츠를 삽입하는 데 사용할 수 있습니다. 예를 들어 유효한 콘텐츠가 포함된 ::before에 대한 모든 유효한 선언은 다음과 같습니다.

.element :: before {   
  content:url(path / to / image.png); / *图像,例如,图标* /
}
.element :: before {    
  content:“注意:” ; / *一个字符串* /
}
.element :: before {   
  content:“\ 201C” ; / *也算作一个字符串。转义Unicode会将其渲染为字符* /
}

참고: 의사 요소를 사용하여 삽입된 이미지는 크기를 조정할 수 없으며 있는 그대로 삽입되므로 사용하기 전에 이미지의 크기를 조정해야 합니다.

2.:before와 :before

동일한 점:

1. 객체 앞에 내용을 설정하는 데 사용됩니다. :before와 :before 쓰기는 동일합니다

차이:

:before는 Css2로 작성되고, ::before는 Css3


:before는 ::before보다 호환성이 더 좋지만 H5 개발에서는 권장됩니다. ::before

사용:

1. 의사 클래스 요소는 콘텐츠 속성과 함께 사용해야 합니다

2 의사 클래스 요소는 CSS 렌더링 레이어에 의해 추가되며 js

를 통해 작동할 수 없습니다. 3. 의사 클래스 요소 클래스 개체 특수 효과는 일반적으로 다음을 통해 활성화됩니다. hover 의사 클래스 스타일

.test:hover::before{
    /* 这时animation和transition才生效 */
}

요약:

위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

위 내용은 ::before는 무엇을 하나요? ::before와 :before의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.