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 つの疑似クラスにはもっと便利な使い方がたくさんあります。

2. : Clear float after

要素を float に設定すると、その親要素とその兄弟要素のレイアウトが影響を受けます。たとえば、親要素の背景の境界線が正常に表示されなくなります。 、親要素の兄弟要素の位置レイアウトが間違っています、お待ちください

この種のフローティングの影響を回避するには、フローティングをクリアする必要があり、:after はその方法の 1 つです。

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. ダイアログボックスを下に枠線で書きます

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;
}

効果は図に示すとおりです:

(枠線付きのダイアログ ボックスを作成する場合、三角形は :before と :after の両方を使用する必要があります)

以上がCSSの:afterと:beforeの機能と使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。