CSS에서 :after 및 :before의 기능 및 사용법

이 장에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!