이 장에서는 CSS에서 :after 및 :before의 기능과 사용법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1 :before 및 :after의 주요 기능은 요소 콘텐츠 앞뒤에 지정된 콘텐츠를 추가하는 것입니다. 예:
HTML 코드:
<p>你好</p>
CSS 코드:
p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; }
효과는 다음과 같습니다.
위의 코드는 :before 및 :after의 기본 사용법이지만 이 두 의사 클래스를 더 편리하게 사용할 수 있는 방법이 많이 있습니다.
2. :
이후 부동소수를 삭제합니다. 요소가 부동으로 설정되면 해당 상위 요소와 상위 요소의 형제 요소가 영향을 받습니다. 예를 들어 상위 요소의 배경 테두리는 정상적으로 표시될 수 없습니다. , 그리고 상위 요소의 형제 요소의 위치 레이아웃이 잘못되었습니다. 잠깐,
이런 플로팅의 영향을 피하기 위해서는 플로팅을 지워야 하며, :after가 방법 중 하나입니다.
CSS 코드:
ul:after{ content: ''; display: block; width: 0; height: 0; clear: both; }
3. :before와 :after는 작은 삼각형을 작성하는 데 사용됩니다.
일상 작업에서는 작은 삼각형과 같은 작은 아이콘을 자주 접하게 됩니다. 이를 달성하려면 :after :before 의사 클래스를 사용하는 것이 더 편리합니다.
HTML 코드:
<div class="demo">这是一个测试</div>
CSS 코드:
.demo:after{ content: ''; display: inline-block; width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #AFABAB; position: relative; top: 2px; left: 10px; }
효과는 그림과 같습니다:
이렇게 하면 텍스트 뒤에 작은 삼각형을 추가할 수 있으니 매우 편리하지 않나요
4. 사용: 이후 및: 이전 대화 상자 작성
HTML 코드:
<div class="left"> <p>吃了吗</p> </div> <div class="right"> <p>吃过了,吃了红烧排骨和酸菜鱼</p> </div>
CSS 코드:
.left,.right{ min-height: 40px; position: relative; display: table; text-align: center; border-radius: 7px; background-color: #9EEA6A; } .right{ /*使左右的对话框分开*/ top: 40px; left: 60px; } .left > p,.right > p{ /*使内容居中*/ display: table-cell; vertical-align: middle; padding: 0 10px; } .left:before,.right:after{ /*用伪类写出小三角形*/ content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; position: absolute; top: 11px; } /*分别给左右两边的小三角形定位*/ .left:before{ border-right: 8px solid #9EEA6A; left: -16px; } .right:after{ border-left: 8px solid #9EEA6A; right: -16px; }
효과는 그림과 같습니다:
위 대화 상자는 WeChat 스타일을 모방하여 작성되었습니다. :before 및 :after를 사용하여 매우 편리하게 작성하세요
5. 아래에 테두리가 있는 대화 상자를 작성하세요. 대화 상자는 :before와 :after
HTML 코드를 모두 사용합니다.
CSS 코드:
.left,.right{ min-height: 40px; position: relative; display: table; text-align: center; border-radius: 7px; background-color: #9EEA6A; border: 1px solid #736262; } .right{ /*使左右的对话框分开*/ top: 40px; left: 60px; } .left > p,.right > p{ /*使内容居中*/ display: table-cell; vertical-align: middle; padding: 0 10px; } .left:before,.right:after,.left:after,.right:before{ /*用伪类写出小三角形*/ content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; position: absolute; top: 11px; } /*分别给左右两边的小三角形定位*/ .left:before{ border-right: 8px solid #9EEA6A; left: -16px; } .left:after{ /*左边对话框小三角形的边框样式*/ border-right: 8px solid #736262; left: -17px; z-index: -1; } .right:after{ border-left: 8px solid #9EEA6A; right: -16px; } .right:before{ /*右边对话框小三角形的边框样式*/ border-left: 8px solid #736262; right: -17px; z-index: -1; }
The 효과는 그림과 같습니다:
(테두리 대화 상자를 작성할 때 삼각형은 :before 및 :after를 모두 사용해야 합니다)
위 내용은 CSS에서 :after 및 :before의 기능 및 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!