css 's ::before and ::after 비 교환 요소를 사용할 수 있습니다 (예 : 예를 들어, 그들은<div> 그러나 적용 할 수는 없습니다<code><img alt="7 가지 실용적인 사용 :: 이전 및 :: 후 CSS의 의사 요소" > ) 전후에 "컨텐츠"를 삽입하십시오. 이를 통해 HTML 컨텐츠에는 존재하지 않는 웹 페이지에 컨텐츠를 표시 할 수 있습니다. 접근성 측면에서 좋지 않기 때문에 실제 콘텐츠에는 사용해서는 안됩니다. 이런 식으로 페이지에 삽입되는 텍스트를 선택하고 복사 할 수 없기 때문입니다. 단지 장식용 콘텐츠 일뿐입니다. 이 기사에서는 ::before ::after 하여 흥미로운 효과를 만드는 방법을 보여주는 7 가지 다른 예를 살펴 보겠습니다.
대부분의 예에서는 CSS 유사 요소와 특히 관련된 코드 섹션 만 설명합니다. 즉, 다른 스타일의 코드를보고 싶다면 모든 CSS가 임베디드 데모에 포함됩니다.
사용자가 웹 사이트를 방문하면 인터넷 연결 (또는 제어 할 수없는 요소)이 이미지가 다운로드되는 것을 방지 할 수 있으므로 브라우저에는 이미지에 대한 손상된 이미지 아이콘과 대체 텍스트가 표시됩니다 (존재하는 경우).
대신 사용자 정의 자리 표시자를 사용하는 방법? ::before 을 사용 ::after 다음을 수행 할 수 있습니다.
먼저 이미지 요소에서 상대 위치를 사용해야합니다. 우리는 나중에 의사 요소 중 하나에서 절대 포지셔닝을 사용 하므로이 상대 위치는 의사 요소가 문서 스트림에서 완전히 벗어나지 않고 이미지 요소의 내용 내에 있음을 보장합니다.
img {
표시 : 블록; / / /행 높이로 인한 이미지 아래의 공간을 피하십시오* /
위치 : 상대;
너비 : 100%;
} 다음으로 이미지의 의사 요소를 사용하기 ::before 이미지 효과를 손상시키는 영역을 만들어 봅시다. 우리는 먼저 밝은 회색 배경과 약간 어두운 테두리로 그것을 스타일링 할 것입니다.
img :: 이전 {
배경색 : HSL (0, 0%, 93.3%);
국경 : 1px 점선 HSL (0, 0%, 66.7%);
/ * ... */
}<img alt="7 가지 실용적인 사용 :: 이전 및 :: 후 CSS의 의사 요소" > 교체 요소입니다. Pseudo element ::before 왜 사용합니까? 작동하지 않습니다! 옳은. 이 경우 이미지가로드되지 않으면 의사 요소가 Chrome 및 Firefox에 표시됩니다. 이것이 바로 원하는 것입니다. 한편 Safari는 대체 텍스트에 적용되는 스타일 만 표시합니다.
스타일은 손상된 이미지의 왼쪽 상단에 적용됩니다.
지금까지 모든 것이 잘되었습니다. 이제 블록 레벨 요소 ( display: block )로 설정하고 사용 가능한 전체 공간을 채우기 위해 높이를 제공 할 수 있습니다.
img :: 이전 {
/ * ... */
디스플레이 : 블록;
높이 : 100%;
}우리는 스타일을 더욱 향상시킬 수 있습니다. 예를 들어, 모서리를 둘러 봅시다. 또한 의사 요소에 대한 전체 너비와 절대 포지셔닝을 제공하여 원하는 컨텐츠의 배치를 더 잘 제어하여 대체 텍스트를위한 공간을 남겨 두어야합니다.
img :: 이전 {
/ * ... */
Border-Radius : 4px;
콘텐츠: "";
위치 : 절대;
너비 : 100%;
}여기서 멈추고 작업을 확인하면 대체 텍스트가 갑자기 사라져 머리를 긁을 수 있습니다.
이는 content 빈 문자열로 설정하고 (생성 한 컨텐츠 및 스타일을 표시해야 함) 실제 대체 텍스트를 포함하여 전체 공간을 덮어 쓰기 때문입니다. 거기에 있습니다. 우리는 그것을 볼 수 없습니다.
이번에 ::after pseudo element의 도움으로 대체 텍스트를 대체 (얻을 수 있습니까?)를 표시 할 수 있습니다. content 속성은 실제로 attr() 함수를 사용하여 이미지의 alt 속성 텍스트를 표시 할 수 있습니다.
img :: 후 {
내용 : att (alt);
/*몇 가지 간단한 스타일*/
글꼴 중량 : 대담한;
위치 : 절대;
높이 : 100%;
왼쪽 : 0px;
텍스트 정렬 : 센터;
상단 : 1px;
너비 : 100%;
}이것은 굉장합니다! 적어도 크롬에서.
그러나 이것은 Firefox에서는 그렇지 않습니다.
빠른 해결 방법은 속성 선택기 (이 경우 img[alt] )를 사용하여 alt 속성을 직접 찾아 크롬과 일치하도록 유사한 스타일을 배치하는 것입니다.
img [alt] {
텍스트 정렬 : 센터;
글꼴 중량 : 대담한;
색상 : HSL (0, 0%, 60%);
}이제 Chrome과 Firefox에서 일관된 훌륭한 자리 표시자가 있습니다.
블록 인용은 작품의 인용 또는 발췌입니다. 또한 시각적으로 흥미로운 콘텐츠로 텍스트 벽을 깰 수있는 아주 좋은 기회를 제공합니다.
블록 참조를 스타일링하는 다양한 방법이 있습니다. Chris는 2007 년으로 거슬러 올라가는 5 스타일의 세트를 가지고 있습니다.
나는 다음과 같은 다른 기술을보고 싶다 ::before 및 ::after . 이전 예에서 보았 듯이 content 속성을 사용하여 생성 된 컨텐츠를 표시하고 다른 속성을 적용하여 장식 할 수 있습니다. 블록 참조의 시작과 끝에 큰 따옴표를 넣어 봅시다.
HTML은 간단합니다.
<blockquote> </blockquote>
CSS의 일부 장식 :
블록 쿼트 {
글꼴 스타일 : 이탈리아;
라인 높이 : 1.618;
글꼴 크기 : 1.2EM;
너비 : 30em;
위치 : 상대;
패딩 : 40px 80px;
} position: relative 으로, 당신이 배울 수 있듯이, 블록 참조를 포지셔닝하는 데 중요합니다.
당신이 추측 할 수 있듯이, 우리는 첫 번째 인용문을 위해 ::before end quote를 위해 ::after 사용할 것입니다. 이제 우리는 간단히 content 속성을 둘 다 호출하고 태그를 생성 할 수 있습니다. 그러나 CSS는 open-quote 및 close-quote 값을 제공합니다.
Blockquote :: 이전 {
내용 : 오픈 쿼트;
/*왼쪽 상단에 배치*/
상단 : 0;
왼쪽 : 0;
}
Blockquote :: 이후 {
내용 : 근접한 인용;
/*오른쪽 하단에 배치*/
하단 : 0;
오른쪽 : 0;
}이것은 우리가 원하는 인용문을 제공하지만 스타일을 조금 분류 할 수 있습니다.
Blockquote :: 이전,
Blockquote :: 이후 {
배경색 : #CCCCCCCC;
디스플레이 : 블록;
너비 : 60px;
높이 : 60px;
라인 높이 : 1.618;
글꼴 크기 : 3em;
Border-Radius : 100%;
텍스트 정렬 : 센터;
위치 : 절대;
} 우리는 HTML에서 주문합니다 (<ol></ol> ) 및 장애 (<ul></ul> ) 목록. 둘 다 브라우저 사용자 에이전트 스타일 시트에 의해 결정된 기본 스타일이 있습니다. 그러나 pseudo element ::before 사용하여, 우리는 자체 컨텐츠로 이러한 "기본"스타일을 무시할 수 있습니다. 뭐야? content 속성에서 이모티콘 (?)을 사용할 수 있습니다!
.name-list li :: 이전 {
콘텐츠: "?";
마진 오른쪽 : 15px;
글꼴 크기 : 20px;
} 이것은 좋지만, 우리는 실제로 목록 마커 스타일에 사용되는 ::marker 의사 요소를 실제로 사용할 수 있다는 점에 주목할 가치가 있습니다. Eric Meyer는 그것이 어떻게 작동하는지 보여줍니다. 이는 장기적으로 더 나은 접근 방식 일 수 있습니다.
양식을 스타일링하는 가장 영리한 트릭 중 하나는 표준 HTML 확인란을 사용하여 토글 스위치를 만드는 것입니다. 실제로 Preethi Sam은 최근 CSS 마스크를 사용하여 다른 확인란 스타일 팁을 보여줄 수있는 방법을 공유했습니다.
이름에서 알 수 있듯이 토글 스위치는 선택한 선택되지 않은 확인란 요소의 선택한 상태를 전환하거나 전환하는 데 사용됩니다.
<label> <input type="checkbox"> </label>
모든 사용자 정의는 ::before and ::after pseudo elements에 추가되기 때문입니다.<label></label> 요소 수정. 그러나 먼저 여기에 일부가 있습니다<label></label> 요소의 기본 CSS :
.Container {
배경 : #212221;
배경 : 선형 그레이드 (오른쪽, #1560bd, #e90);
Border-Radius : 50px;
높이 : 40px;
위치 : 상대;
너비 : 75px;
}모든 공간을 차지하는 동안 확인란의 기본 모양을 숨길 것입니다. 이상한? 보이지 않지만 기술적으로 여전히 존재합니다. 우리는 다음을 수행합니다.
입력 {
-webkit-appearance : 없음; / * Safari * /
커서 : 포인터;*대화식 요소라는 것을 보여줍니다.
높이 : 100%;
위치 : 절대;
너비 : 100%;
} 이제 pseudo element 설정 ::before 다음을 사용해 봅시다<input> 요소 스타일. 이 스타일은 입력의 모양이 바뀌어 최종 결과에 더 가까워집니다.
입력 :: 이전 {
배경 : #ffff;
Border-Radius : 50px;
콘텐츠: "";
높이 : 70%;
위치 : 절대;
상단 : 50%;
변환 : 번역 (7px, -50%);
너비 : 85%;
} 뭐, 잠깐? 당신은 ::before<input> . 이것은 정확하지만 입력 유형이 이미지 인 경우에만<img alt="7 가지 실용적인 사용 :: 이전 및 :: 후 CSS의 의사 요소" > 요소. 다른 양식 컨트롤 (예 : 확인란)은 HTML 사양에서 비 교체 요소로 정의됩니다.
다음 ::after , 우리는 "토글"버튼을 만들어야합니다. 그러나 언급 할 가치가있는 두 가지 점이 있습니다.
transform 속성을 사용하여 이동합니다.<input> 의 중심. 입력 :: 후 {
배경 : 선형 그레이드 (오른쪽, 주황색, #8e2de2);
Border-Radius : 50px;
콘텐츠: "";
높이 : 25px;
불투명도 : 0.6;
위치 : 절대;
상단 : 50%;
변환 : 번역 (7px, -50%);
전환 : 모든 .4S;
너비 : 25px;
} 토글 버튼을 클릭하십시오. 아무 일도 일어나지 않았습니다. 우리가 실제로 변하지 않았기 때문입니다<input> 선택된 상태. 우리가 그것을 바꾸더라도 결과는… 불쾌합니다.
해결책은 :checked 을 적용하는 것입니다<input> :: 의사 요소 ::after . 선택된 확인란의 선택한 상태를 구체적으로 배치하고이를 pseudo element ::after 링크함으로써 토글 버튼을 원래 위치로 다시 이동할 수 있습니다.
입력 : 확인 :: 이후 {
불투명도 : 1;
변환 : 번역 (170%, -50%);
} 우리는 국경으로 이미지를 장식하여 디자인에 눈에 띄지 않게 만들거나 혼합 할 수 있습니다. 우리가 경계에서 그라디언트를 사용할 수 있다는 것을 알고 있습니까? 글쎄, 우리는 ::before 사용할 수 있습니다 (그리고 물론 다른 방법이 있습니다).
핵심 아이디어는 이미지에 구배를 만들고 CSS z-index 속성 및 음수 값을 사용하는 것입니다. 음수 값은 이미지 아래의 그라디언트를 스태킹 순서로 당깁니다. 이는 그라디언트에 네거티브 z-index 있는 한 이미지가 항상 상단에 표시됨을 의미합니다.
. 그라디언트-반드시 :: 이전 {
/*스타일 제공*/
콘텐츠: "";
/*전체 공간 채우기*/
위치 : 절대;
상단 : 0;
왼쪽 : 0;
하단 : 0;
오른쪽 : 0;
/*그라데이션 생성*/
배경 이미지 : 선형 그레이드 ( #1A1A1A, #1560BD);
/*이미지 뒤에 그라디언트를 쌓아*/
Z- 인덱스 : -1;
}
수치 {
/*기본 마진 삭제*/
여백 : 0;
/*이미지를 짜서 그라디언트 뒤에 구배를 표시하십시오*/
패딩 : 10px;
}이것은 우리가 이전 예제에서 한 것과 유사하지만 여기서는 이미지 상단에 그라디언트를 적용하고 있습니다. 우리는 왜 이것을합니까? 이미지에 약간의 질감과 깊이를 추가하는 좋은 방법이 될 수 있습니다. 또는 상단에 가독성을 향상시키기 위해 추가 대비가 필요한 텍스트가있는 경우 이미지를 밝게하거나 어둡게하는 데 사용될 수 있습니다.
이것은 우리가 방금 한 것과 비슷하지만 몇 가지 명백한 차이점을 알 수 있습니다.
그림 :: 이전 {
배경 이미지 : 선형 등급 (오른쪽 상단, #1A1A1A, 투명);
콘텐츠: "";
높이 : 100%;
위치 : 절대;
너비 : 100%;
} 당신은 그것을 보셨습니까? 이미지 위에 그라디언트를 쌓는 것이 좋기 때문에 z-index 없습니다. 또한 배경 구배에 투명성을 도입하여 구배를 통해 이미지를 표시 할 수 있습니다. 당신은 중첩처럼 알고 있습니다.
대부분의 경우, 대부분의 경우 HTML 라디오 버튼의 기본 스타일을 사용자 정의하려고합니다.이 버튼은 일반적으로 ::before 과 ::after 다음과 같이 수행됩니다.
우리는 먼저 준비하기 위해 몇 가지 기본 스타일을 설정했습니다.
/*모든 콘텐츠 센터*/
.flex- 센터 {
정렬 구조 : 센터;
디스플레이 : Flex;
정당화 컨텐츠 : 센터;
}
/*양식 요소 스타일*/
.형태 {
배경 : #CCC;
높이 : 100VH;
너비 : 100%;
}
/*입력 스타일*/
.form-row {
배경 : #ffff;
Border-Radius : 50px;
높이 : 40px;
여백 : 10px;
오버플로 : 숨겨진;
위치 : 상대;
너비 : 150px;
} 이제 appearance: none; 라디오 버튼의 기본 스타일을 삭제하십시오.
.form-input {
-webkit-appearance : 없음; / * Safari * /
외관 : 없음;
} ::before 라디오 버튼의 왼쪽 상단에 있어야하며 선택하면 배경색이 변경됩니다.
.form-input :: 이전 {
/*스타일 제공*/
콘텐츠: '';
/*대화식이라는 것을 보여줍니다*/
커서 : 포인터;
/*입력의 왼쪽 상단에 위치*/
위치 : 절대;
상단 : 0;
왼쪽 : 0;
/*전체 공간을 점유*/
높이 : 100%;
너비 : 100%;
}
/*입력이 선택된 경우 ...*/
.form-input : Checked :: 이전 {
/*배경색 변경*/
배경 : #21209C;
} 우리는 여전히 몇 가지 문제를 해결하기 ::after 사용해야합니다. 구체적으로, 라디오 버튼을 선택할 때, 우리는 현재 상태에서 링이 파란색이기 때문에 원형 링의 색상을 흰색으로 변경하려고합니다.
.form-input :: 이후 {
/*스타일 제공*/
콘텐츠: '';
/*대화식이라는 것을 보여줍니다*/
커서 : 포인터;
/*일부 국경 스타일*/
Border-Radius : 50px;
테두리 : 4px Solid #21209C;
/*포지셔닝 링*/
위치 : 절대;
왼쪽 : 10%;
상단 : 50%;
변환 : 번역 (0, -50%);
/*세트 크기*/
높이 : 15px;
너비 : 15px;
}
/*입력이 선택된 경우 ...*/
.form-input : checked :: 이후 {
/*테두리 변경 :: 이후에 흰색*/
국경 : 4px Solid #ffffff;
}양식 태그는 여전히 여기에서 사용할 수 없습니다. 색상을 추가하려면 양식 레이블을 직접 찾아야하며 양식 입력을 선택하면 색상을 보이는 색상으로 변경합니다.
.form-label {
색상 : #21209C;
글꼴 크기 : 1.1REM;
마진 왼쪽 : 10px;
} 버튼을 클릭하면 여전히 반응 할 것이 없습니다. 무슨 일이야? position: absolute on ::before and ::after HTML 문서에서 발생하는 모든 것이 HTML 문서에서 새 위치로 이동하지 않거나 CSS를 사용하여 위치가 변경되지 않으면 가려지기 때문입니다. 따라서 라디오 버튼을 선택할 때마다 레이블이 덮어 씁니다.
이전에 다른 예에서 비슷한 문제를 해결했기 때문에 이미이 문제를 해결하는 방법을 이미 알고 있습니까? 태그를 형성하기 위해 z-index: 1 (또는 position: absolute )을 적용합니다.
.form-label {
색상 : #21209C;
글꼴 크기 : 1.1REM;
마진 왼쪽 : 10px;
z-index : 1; /*라벨이 상단에 쌓여 있는지 확인하십시오.
/* 위치 : 절대; 이것은 대체 옵션입니다*/
} 우리는 ::before and ::after pseudo elements, 기본 스타일을 사용자 정의하고, 유용한 자리 표시자를 만들고, 이미지에 테두리를 추가하여 흥미로운 효과를 만들 수있는 7 가지 방법을 다루었습니다.
우리는 결코 CSS를 사용하여 선택할 수있는 다른 요소를 활용할 때 잠금 해제 할 수있는 모든 가능성을 다루지 않습니다. 그러나 Lynn Fisher는 단일 요소를 사용하여 놀라운 디자인을 만드는 취미로 만들었습니다. 그리고 현실적인 그림 효과를 위해 여러 곳에서 의사 요소를 사용하는 Diana Smith의 CSS Art를 잊지 마십시오.
위 내용은 7 가지 실용적인 사용 :: 이전 및 :: 후 CSS의 의사 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
