CSS_developdoc の ::before および ::after 疑似要素

CSS の ::before および ::after 疑似要素

2024-07-12

1.CSS疑似要素

2. 導入前 :: 導入後

1、::前

2、::後

3. コンテンツの共通属性値

3. ::before ::after アプリケーションシナリオ

1.CSS疑似要素

CSS 疑似要素は、CSS の特別なセレクターを使用して作成された仮想要素を指し、実際の既存の HTML 要素ではありません。

文書の特定の部分を選択して操作して、特殊効果を実現するために使用されます。
疑似要素を使用すると、追加の HTML タグを追加せずにドキュメント内のコンテンツのスタイルを設定できます。
疑似要素は、要素のレイアウト、位置、幅、高さ、背景など、HTML でサポートされているさまざまな属性を設定できる要素でもあります。

この記事では主に、2 つの疑似要素::before と ::after の関連コンテンツといくつかの使用シナリオを紹介します。

2. 導入前 :: 導入後

::before ::after 擬似要素は、要素の前または後に指定されたコンテンツを挿入するために使用されます。

content 属性を使用して、挿入するコンテンツを指定します。
content 属性と一緒に使用する必要があります、content 属性値は空にすることができます。
疑似要素の表示属性値のデフォルトは inline；

1、::前

::before セレクターは、指定された要素の前にコンテンツを挿入するために使用されます。

(1) 文法


元素::before{
    content: "要插入的内容";
    /* 其他属性 */
}

(2) 例

ページ上のすべての p 要素の前にコンテンツを挿入します。


<style>
    p::before{
        content: "使用::before伪元素插入的内容——";
        /* 其他属性 */
    }
</style>
<body>
    <div>
        <p>第一个P标签中的内容</p>
        <p>第二个P标签中的内容</p>
        <p>第三个P标签中的内容</p>
    </div>
</body>

2、::後

::after セレクターは、指定された要素の後にコンテンツを挿入するために使用されます。

(1) 文法


元素::after{
    content: "要插入的内容";
    /* 其他属性 */
}

(2) 例

ページ上のすべての p 要素の後にコンテンツを挿入します。


<style>
    p::after{
        content: "——使用::after伪元素插入的内容";
        /* 其他属性 */
    }
</style>
<body>
    <div>
        <p>第一个P标签中的内容</p>
        <p>第二个P标签中的内容</p>
        <p>第三个P标签中的内容</p>
    </div>
</body>

3. コンテンツの共通属性値

::before ::after は content 属性と一緒に使用する必要があります。 content の一般的な属性値は次のとおりです。

シリアルナンバー	属性値	説明する
1	弦	テキストコンテンツを設定します。
2	url("url")	写真などのメディアファイルの URL リンクを設定します。
3	引用符を開く	先頭の引用符として設定します。
4	引用終了	逆引用符に設定します。
5	属性(属性)	要素の属性属性を文字列として返します。
6	カウンター	カウンターを設定します。
7	なし	コンテンツを null 値に設定します。
8	普通	:before および :after 擬似クラス要素では、none とみなされます。つまり、null 値でもあります。

(1) テキスト内容を設定する

content 属性値を文字列タイプに設定して、擬似要素にテキストを追加します。


<style>
    span::before{
        content: "使用::before添加的文本前缀——————";
    }
    span::after{
        content: "————使用::after添加的文本后缀";
    }
</style>
......
<body>
    <span class="box">我是HTML元素中的文本</span>
</body>

(2) メディアリンクの設定

url() 属性値を使用して、メディアファイルのコンテンツを疑似要素としてインポートできます。


<style>
    .container {
        margin: 100px;
    }
    .avatar::after{
        content: url("D:\test\girl.png");
        display: block;
    }
</style>
......
<body>
    <div class="container">
        <div class="avatar">示例图片</div>
    </div>
</body>

URL を使用して追加される画像のサイズは設定できないことに注意してください。画像は背景を通して追加することをお勧めします。

(3) || の前に引用符を置きます。

open-quote または close-quote 属性値を使用して、疑似要素の内容を前引用符または後ろ引用符に設定できます。


<style>
    p:nth-child(1)::before{
        content:open-quote;
        /* 其他属性 */
    }
    p:nth-child(2)::after{
        content:close-quote;
    }
</style>
......
<body>
    <div>
        <p>添加前引号</p>
        <p>添加后引号</p>
    </div>
</body>

(4) 要素の属性を取得する

attr() を通じて要素の属性値を取得し (文字列の形式で返されます)、それを擬似要素のコンテンツとして設定します。


<style>
    a:after {
        content: " (" attr(href) ")";
    }
</style>
......
<body>
    <div><a href="https://www.csdn.net">CSDN</a>点击跳转至CSDN...</div>
    <div><a href="https://www.baidu.com">百度</a>点击跳转至百度...</div>
</body>

(5) カウンタの設定


<style>
    div {
        counter-increment: index;
    }
    div:before {
        content:counter(index);
    }
</style>
......
<body>
    <div>、、、、、、我是第1个div、、、、、、</div>
    <div>、、、、、、我是第2个div、、、、、、</div>
    <div>、、、、、、我是第3个div、、、、、、</div>
    <div>、、、、、、我是第4个div、、、、、、</div>
</body>

3. ::before ::after アプリケーションシナリオ

これら 2 つの疑似要素::before ::after の使用は非常に簡単ですが、柔軟に適用できれば、非常に優れた CSS 効果を実現できます。

1.統一文字を設定する


<style>
    p::before{
        content: "* ";
        color: red;
        font-size: 24px;
        /* 其他属性 */
    }
    p::after{
        content: "：____________";
        /* 其他属性 */
    }
</style>
...
<body>
    <div>
        <p>姓名</p>
        <p>年龄</p>
        <p>出生日期</p>
        <p>居住地址</p>
    </div>
</body>

2. 背景を通して写真を追加する


<style>
    .container{
        margin: 100px;
    }
    .container::after{
        content: "";
        display:block;
        width: 260px;
        height: 260px;
        background-image: url("D:\test\girl.png");
        background-position: center;
        background-size: cover;
    }
</style>
......
<body>
    <div class="container">通过背景添加图片</div>
</body>

3. 飾り線を入れる


<style>
    .line{
        display: flex;
        align-items: center;
        margin: 60px;
        height: 40px;
        font-size: 18px;
    }
    .line::before, .line::after{
        content: "";
        width: 300px;
        border-top: 6px double;
        margin: 5px;
    }
    
</style>
......
<body>
    <div class="line">添加装饰线</div>
</body>

4. 右側の矢印を展開します


<style>
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
 
        width: 400px;
        margin: 100px auto;
        padding: 30px 0;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px #acacac;
    }
 
    .setting-item{
        position: relative;
        align-items: center;
        display: flex;
        width: 300px;
        height: 40px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
 
    .setting-item::after{
        position: absolute;
        right: 0;
        content: "";
        width: 8px;
        height: 8px;
        border-top: 1px solid #666;
        border-right: 1px solid #666;
        transform: rotate(45deg);
    }
    
</style>
......
<body>
    <div class="container">
        <div class="setting-item">账号设置</div>
        <div class="setting-item">权限管理</div>
        <div class="setting-item">相关服务</div>
        <div class="setting-item">帮助与反馈</div>
        <div class="setting-item">......</div>
    </div>
</body>

5. ダイアログトライアングル


<style>
    .container {
        width: 400px;
        margin: 100px auto;
        padding: 30px 0;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px yellowgreen;
    }
 
    .left-box,.right-box {
        display: flex;
    }
 
    .right-box {
        justify-content: end;
    }
 
    span {
        position: relative;
        display: flex;
        align-items: center;
 
        background-color: yellowgreen;
        border-radius: 6px;
        margin: 4px 14px;
        padding: 16px;
    }
 
    .left-box span::before, .right-box span::after{
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        background-color: yellowgreen;
        transform: rotate(45deg);
    }
 
    .left-box span::before{
        left: -6px;
    }
    .right-box span::after {
        right: -6px;
    }
</style>
 
......
 
<body>
    <div class="container">
        <div class="left-box">
            <span>Nice to meet you!</span>
        </div>
        <div class="right-box">
            <span>Nice to meet you, too!</span>
        </div>
    </div>
</body>

6. アイコンの挿入


<style>
    .login-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
 
        width: 400px;
        height: 400px;
        margin: 100px auto;
        border-radius: 8px;
        box-shadow: 0 0 4px 1px #acacac;
    }
    .title{
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 40px;
    }
    .account, .pwd, .login-btn, .forgot-pwd{
        width: 300px;
        height: 40px;
        line-height: 40px;
    }
 
    .account, .pwd{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        color: #888;
    }
    .pwd{
        margin-top: 20px;
    }
    .account::before, .pwd::before{
        content: '';
        display: inline-block;  
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin-right: 8px;
    }
    .account::before{
        background-image: url("D:\test\user.svg");
    }
    .pwd::before {
        background-image: url("D:\test\pwd.svg");
    }
 
    .login-btn{
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        background: #2687F0;
        border-radius: 5px;
        margin-top: 40px;
    }
 
    .forgot-pwd{
        text-align: right;
        font-size: 14px;
        color: #888;
        margin-top: 20px;
    }
</style>
......
<body>
    <div class="login-box">
        <div class="title">XXX 管理系统</div>
        <div class="account">请输入账号</div>
        <div class="pwd">请输入密码</div>
        <div class="login-btn">登 录</div>
        <div class="forgot-pwd">忘记密码</div>
    </div>
</body>

=========================================================================

毎日少しずつ進歩していきましょう～！

実践的なCSSのヒント〜！

技術共有

CSS の ::before および ::after 疑似要素

1.CSS疑似要素

2. 導入前 :: 導入後

1、::前

2、::後

3. コンテンツの共通属性値

3. ::before ::after アプリケーションシナリオ

1.統一文字を設定する

2. 背景を通して写真を追加する

3. 飾り線を入れる

4. 右側の矢印を展開します

5. ダイアログトライアングル

6. アイコンの挿入

個人プロフィール

私の連絡先情報

技術共有

CSS の ::before および ::after 疑似要素

1.CSS疑似要素

2. 導入前 :: 導入後

1、::前

2、::後

3. コンテンツの共通属性値

3. ::before ::after アプリケーション シナリオ

1.統一文字を設定する

2. 背景を通して写真を追加する

3. 飾り線を入れる

4. 右側の矢印を展開します

5. ダイアログトライアングル

6. アイコンの挿入

個人プロフィール

私の連絡先情報

3. ::before ::after アプリケーションシナリオ