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

::이전은 무엇인가요? 그것은 무엇을 합니까? 이 글에서는 ::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를 통해 글리프가 표현되고 추가되는 방식입니다.

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

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

보시다시피 ::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 중국어 웹사이트의 기타 관련 기사를 참조하세요!