ホームページ > 記事 > ウェブフロントエンド > CSS::before と ::after の疑似要素の詳細な説明

CSS::before と ::after の疑似要素の詳細な説明

青灯夜游転載: 2021-09-14 10:14:402385ブラウズ

この記事では、CSS の ::before および ::after 疑似要素について説明し、その応用例を見ていきます。

この記事では、最も簡単なことから始めて、::before と ::after を理解して使用する方法を説明します。次に、実際の使用シナリオに適用します。

::before および ::after とは何ですか?

::before および ::after は、疑似要素を作成するためにセレクターに追加できるキーワードです。疑似要素は、セレクターに一致する要素のコンテンツの前後に挿入されます。

CSS::before と ::after の疑似要素の詳細な説明

content 属性

1) ::before および ::after の下にある固有のコンテンツについては、次を使用します。 CSS レンダリングで要素の論理的な先頭または末尾にコンテンツを追加するために使用されます。

2) ::before および ::after は content 属性とともに使用する必要があります。content は、挿入されたコンテンツを定義するために使用されます。content には、少なくとも空の値が必要です。

3) これらは追加は DOM に表示されません。ドキュメントのコンテンツは変更されず、コピーできません。CSS レンダリングレイヤーに追加されるだけです。したがって、意味のあるコンテンツを表示するために :before または :after を使用するのではなく、装飾的なコンテンツを表示するために使用するようにしてください。

content は次の値を取ることができます:

string

引用符を使用して文字列を囲むと、その文字列が要素コンテンツに追加されます

CSS::before と ::after の疑似要素の詳細な説明 #

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}

<p>JavaScript高级程序设计</p>

attr()

Pass attr() は、画像の alt プロンプトテキストやリンクの href アドレスの表示など、現在の要素の属性を呼び出します。

CSS::before と ::after の疑似要素の詳細な説明

a::after {
    content: &#39; → &#39; attr(href); /* 在 href 前显示一个箭头 */
}

 <a href="https://www.baidu.com/">百度地址</a>

CSS::before と ::after の疑似要素の詳細な説明

 a::after{
    content: "【" attr(href) "】";
}

<a href="https://www.baidu.com/">百度地址</a>

url()/uri()

はメディアを参照するために使用されますファイル。例: 「Baidu」では、前面に画像が表示され、背面に href 属性が表示されます。

CSS::before と ::after の疑似要素の詳細な説明

a::before{
    content: url("img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}

<a href="https://www.baidu.com/">百度地址</a>

Note

1) URL では引用符を使用できません。 URL を引用符で囲むと、URL は文字列になり、画像自体ではなくテキスト「url(image.jpg)」がコンテンツとして挿入されます。

2) content 属性、画像を直接使用します、幅と高さを記述しても画像サイズを変更できません;

解決策: この問題を解決したい場合は、コンテンツを変更できます:'' 空として記述し、background:url() を使用して画像を追加します

/*伪元素添加图片：*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图，并拉伸*/
    background:url("img/0CSS::before と ::after の疑似要素の詳細な説明") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小（不会被图片撑开）*/
    background-size:100%;
    width:100px;
    height:100px;
}复制代码

3) Apple 側の疑似要素は有効になりません。img、input および単一タグ自体は子要素を持つことができないため、他の単一タグには :after および :before 疑似要素がありません (一部のブラウザーでは使用できません。たとえば、Apple では無効であると判断されます)。

解決策: img を div でラップすると問題を解決できます

4) 疑似要素の画像を動的に変更したい場合は、基本的な疑似要素の画像のスタイルを現在の要素に追加し、動的クラスを使用して疑似要素の画像を書き込みます。

#::before と ::after の適用

#引用符属性で使用

CSS::before と ::after の疑似要素の詳細な説明 #角かっこを追加します

 h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

<h1>给标题加括号</h1>

#引用符を追加します#

 h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

<h2>给标题加引号</h2>

#指定なし、デフォルト

 h3::before{
    content:open-quote;
}
h3::after{
    content:close-quote;
}

<h3>不设置quotes</h3>

装飾タイトル

h1 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
}

h1::before, h1::after {
    content: &#39;&#39;;
    border-top: 6px double;
}

<h1>标题</h1>

レイアウトは、

要素は3列になります。左の列と右の列は幅が minmax(50px, 1fr) の二重線です。これは、一致する幅が常に 50px 以上であることを意味します。タイトルのテキストがきれいに中央に配置されます。

CSS::before と ::after の疑似要素の詳細な説明

#リボンタイトル

 h1 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #875e46;
}

h1::before, h1::after {
    content: &#39;&#39;;
    width: 80px;
    height: 100%;
    background-color: #724b34;

    /* 定位彩带两端形状的位置，并且放在最底层 */
    position: absolute;
    z-index: -1;
    top: 20px;

    /* 彩带两端的形状 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* 绘制并定位彩带的阴影三角形 */
    background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h1::before {
    left: -60px;
}

h1::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻转 */
}
---------------------------
 <h1>标题</h1>

よりリアルな影を実現

CSS::before と ::after の疑似要素の詳細な説明

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}


<div class="box shadow"></div>

置換コンテンツ

場合によっては、コンテンツが使用できない場合があります:前または::後。コンテンツが単一の画像に設定されている場合は、それを要素上で直接使用して、その要素の HTML コンテンツを置き換えることができます。 CSS::before と ::after の疑似要素の詳細な説明

たとえば、ページには次の 3 つのコンテンツがあります。

置換クラスを追加した後

.replace {
    content: url(img/replace.png);
}

1)具有简单文本的元素。它会被取代。
2)一个包含<img alt="CSS::before と ::after の疑似要素の詳細な説明" >在其中的元素。它也会被取代。
3)<img alt="CSS::before と ::after の疑似要素の詳細な説明" >直接一个元素。Firefox不会取代它，但其他浏览器会。

清除浮动

方式一：

.classic-clearfix::after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}

方式二：

.modern-clearfix {
    display: flow-root;
}

1CSS::before と ::after の疑似要素の詳細な説明

模拟float:center的效果

float没有center这个取值，但是可以通过伪类来模拟实现。

原理：左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

1CSS::before と ::after の疑似要素の詳細な説明

body { font: 14px/1.8 Georgia, serif;}
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }

<div>
    <img  alt="CSS::before と ::after の疑似要素の詳細な説明" >
    <div>
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
    <div>
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
</div>

1CSS::before と ::after の疑似要素の詳細な説明

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

原文地址：https://juejin.cn/post/6986629782666477599

作者：Axjy

CSS::before と ::after の疑似要素の詳細な説明

::before および ::after とは何ですか?

#::before と ::after の適用

関連記事