위조원소::before와:after의 쿨한 사용법

나는 ::before과::after위조원소를 약간 좋아한다는 것을 인정할 것이다.
그들은 마치 어떤 스타일링 모험 중의 한 쌍의 추종자 같다.
영원히 혼자 세상에 직면할 필요가 없는 것처럼. 곳곳에 1개가 있기 때문에 지금 3개가 있다.
출력의 3배.스타일링 가능한 수량의 3배.네가 창조할 수 있는 놀라운 시각 효과의 3배다.

무엇이 위조원소입니까?

현재, 만약 이전에 ::before과::after를 만난 적이 없다면, "이것은 무엇입니까::psuedoelement를 언급하기 전에?"라고 물어볼 수 있습니다.
다음은 30초 개요입니다.
위조 요소는 CSS를 사용하여 문서에 삽입할 수 있는 위장 요소입니다.예를 들어, 매우 간단한 CSS를 작성하려면 다음과 같이 하십시오.

p::before {
  content: "Hello!"
}

갑자기 내 페이지의 모든 요소p는 그 내용 전에'Hello'라는 단어를 삽입한다.::after 위조원소는 유사하지만 내용 이후.content 속성은 그 안에 표시되는 내용을 설정하지만, 이 요소들은 다른 요소와 완전히 같은 방식으로 스타일 설정을 할 수 있기 때문에 실제로 텍스트 내용을 포함할 필요가 없다.사실 많은 가장 재미있는 용도는 완전히 시각화된 것이다.
더 전면적인 소개를 원한다면 추천합니다this piece on SmashingMagazine.이 글에서 나는 위조 요소가 어떻게 작동하는지 더 적게 주목하고, 일련의 놀라운 예에 더 관심을 가질 것이다.
내가 강조하고 싶은 것은 바로 잡았다는 것이다. 왜냐하면 그것은 이미 나를 여러 번 잡았기 때문이다.우리가 탐색할 많은 용도는 도형을 포함하지만 실제 문자 내용은 없다.이것은 좋지만 content 속성을 동시에 설정해야 합니다. 내용이 비어 있으면 display 속성이나 위조 요소가 표시되지 않습니다.나는 이미 이 일에 여러 번 물렸다. 그러니 영원히 기억해라. 설정 내용부터.사용이 완전히 시각적이라면 다음과 같이 설정하십시오.

content: ""
display: inline-block

::before와:after의 간단한 사용법

::before과::after의 간단한 사용법부터 시작합시다.

사용자 정의 아이콘

before의 간단하고 흔하지만 유용한 용법은 특정한 종류를 가진 요소에 아이콘을 추가하는 것이다.예를 들어, FontAwesome 이 기술을 사용하여 아이콘을 구현합니다.같은 방법으로 사용자 정의 아이콘을 만들 수 있습니다.
현재 Font Awesome은 사용자 정의 글꼴과 content 속성을 사용하여 이 속성을 실현하고 있으며, 이 속성의 장점은 배치된 요소에 따라 자동으로 크기를 조정하는 것이다.그림을 사용하려면 크기를 현저하게 조정해야 합니다. 그렇지 않으면 위조 요소의 크기가 0이고 보이지 않습니다.
예를 들어 페이지에 .kball 클래스가 있는 모든 요소에 30x30의 원형을 표시하고 나의 개인 자료 그림을 가지고 싶다면 이렇게 할 수 있다.
qvQJNG의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.

인용하다

::before과::after의 또 다른 중요한 용법은 인용부호 주위에 인용부호를 추가하는 것이다.예를 들어 우리는 앞뒤에 인용부호를 적용하는'quote'클래스를 만들 수 있고, 심지어는 m-dash 앞에 있는attribute 클래스를 만들 수 있다.
Quotes using Before and After의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.
우리는 또 많은 다른 자주 사용하는 것을 포함할 수 있지만, 나는 계속 사람을 더욱 흥분시키는 일을 이야기하고 싶다.더 많은 정보를 원하시면 thisarticle 를 보십시오.

앞뒤의 고급 사용

모양 만들기

HTML 및 CSS 사용의 과제 중 하나는 반드시 사용해야 하는 "기본"모양의 수량이 제한되어 있다는 것입니다.
본질적으로 모든 원소는 하나의 직사각형이다. 그리고 경계 반경과 경계를 교묘하게 사용하면 이 직사각형을 타원형이나 원형, 비뚤어진 각도로 원각하거나 create atriangle 제거할 수 있다.물론 완성transform 후에 회전할 수 있지만, 그뿐인데...
하지만 지금은 ::before과::after가 생겼다. 네가 놀아야 할 블록은 원래의 3배다.모든 것은 변환, 단독 포지셔닝과 회전이 가능하다.이렇게 하면 순수한 CSS로 만들 수 있는 일련의 형태가 만들어진다.
CSS 테크닉의 ChrisCoyier는 가능한 모양 목록 here 을 보여 줍니다. 저는 ZenDev로 아래에서 제가 가장 좋아하는 모양을 복사했습니다.com의 배색 방안.믿든 안 믿든 상관없어, 이건 HTML 요소야!
Alexander Futekov YinYang in Blue의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.

속성 값 표시

위조원소::before 또는:after의 또 다른 쿨한 사용법은 속성을 표시하는 내용입니다.content 를 포함attr([attributename])으로 설정하면 됩니다.
예를 들어 JavaScript를 지원하는 작은 위젯을 사용하면 어떤 값을 속성으로 저장할 수 있습니다. 실제로 이 속성을 자동으로 표시할 수 있습니다. JavaScript를 보거나 볼 필요가 없습니다!
내가 예전에 사용한 곳은 ZURB Foundation 슬라이더다.슬라이더는 hiddeninput의 값을 변경해서 작동합니다. 그러나 현재 값을 슬라이더 자체에 표시하려면 어떻게 해야 합니까?조종된 핸들은 span일 뿐... 현재 값 aria-valuenow 을 위한 아리아 속성을 가져옵니다.content: attr(aria-valuenow) 가 있는 위조 요소에서 인용함으로써 우리는 그것을 문단에 직접 연결할 수 있다.
Displaying slider value using ::before의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.

다단계 애니메이션

내가 본 가장 재미있는 응용 프로그램 중 하나는 다단계 애니메이션을 만드는 것이다.
그것들은 위조 요소를 다시 이용하여 귀하께 애니메이션에서 조작하는 모든 추가 요소를 제공했다는 사실을 제공합니다.한 방향에서 핵심 요소의 애니메이션을 설정한 다음 각 위조 요소의 애니메이션을 독립적으로 설정할 수 있습니다.
예를 들어, this article 는 스톱 버튼에서 특이한 광택 효과를 생성하는 방법을 보여 줍니다. (아래 그림과 같습니다.)
Sheen Button Effect의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.
우리는 그것으로 각종 재미있는 일을 할 수 있다.멋진 미시적 상호작용을 창조하다.여기에 있는 또 다른 예는 텍스트 내용을 시각적으로 숨기고 누르거나 멈출 때 회전시킨다.
Word In Button Effect의 케빈 볼(@kball의 만년필CodePen을 참조하십시오.

끝내다

이런 위조 요소들은 많은 일을 할 수 있기 때문에 모든 내용을 포괄하기 어렵다.이것은 내가 특히 재미있게 생각하는 예들이다. - 너도 this rounduponCSS 기교를 좋아할 수도 있다. - 만약 네가 진정으로 흥분시키는 예가 있다면 아래 댓글에서 나에게 연락해라!
만약 네가 전단 개발에 관심이 있다면, 너도 나의 매주 시사통신 《금요일전단》에 흥미를 느낄 것이다.매주 금요일, 나는 15개의 링크를 보내서 CSS/SCS, 자바스크립트와 기타 각종 훌륭한 전단 뉴스 중의 가장 좋은 글, 강좌와 공고를 가리킨다.등록: https://zendev.com/friday-frontend.html