CSS 疑似要素::before および ::after の 3 つの使用法の紹介 (コード例)

この記事では、CSS における疑似要素::before と ::after の 3 つの使用法についての記事を紹介します。必要な方は参考にしてください。

::before および ::after 擬似要素については、前の記事の css ::after 擬似要素 を使用して適切な擬似要素が作成されました。 オーバーレイ効果。しかし、これ以外にも、他にも多くの用途があります。この記事では、::before と ::after の他の 3 つの使用法を紹介します。

まず、疑似要素がどのように機能するかを簡単に見てみましょう。

::after および ::before の使用に関する注意事項

ブラウザはこれらの要素を「生成されたコンテンツ」としてレンダリングします。値は空の文字列に設定できます: content: "";。

ブラウザはこの要素を DOM に挿入するときに、セレクターに使用される要素に挿入します。これは仕様の定義です。

:: before は、元の要素の実際のコンテンツの前にあるスタイル可能な子擬似要素を表します。

:: after 元の要素の実際のコンテンツの直後スタイル可能な子擬似要素を表します。

デフォルトでは、この新しい要素はインライン要素になります。要素を DOM に挿入すると、他の要素と同様に変更できます。これにより、さまざまな情報を取得するための多くの制御が可能になります。

重要な注意: すべてのブラウザとスクリーン リーダーの組み合わせが、コンテンツ擬似要素に配置したコンテンツを読み取ることができるわけではありません。これはテキスト要素にのみ使用してください。実際のコンテンツは常にページのマークアップに追加する必要があります。

特定の種類のリンクの横にアイコンを追加する

リンクに関する視覚的な情報をユーザーに提供したい場合は、代わりに ::after を使用してアイコンを追加できます。タグは追加されていません。

絶対リンクではないリンクには「外部リンク」アイコンを追加します。

a[href^="http"]::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
    background-size: contain;
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

このコードでは、内部リンクが相対パスとして記述されていると仮定して、http で始まる href 要素を持つアンカー タグを検索します。

このメソッドのもう 1 つの良い例は PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

です。.pdf で終わるすべての href に対して、この ::after 要素は画像よりも優れています。フォントサイズ、色、その他の効果を調整するための完全な CSS コントロールがあるため、制御が簡単です。

これらのセレクターの詳細については、PHP 中国語 Web サイトの

css オンライン マニュアルを参照してください。

コンテナに興味深い「境界線」を追加する

Houdini Paint API がすべてのブラウザに導入される前は、要素が非常に退屈だと感じるかもしれません。ただし、単純な CSS と ::before と ::after を使用すると、すべてのブラウザでさらに興味深い効果を実現できます。

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.related-article::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

この例では、背景のグラデーションを親要素に適用し、::before 要素を使用して内部を単純な背景色で「クリップ」します。これにより、2 つの長方形であるにもかかわらず、境界線のように見えます。境界線に適合する寸法を取得するには、簡単な計算が必要です。

擬似要素を絶対値として配置することで、その位置を制御できます。 Sass では、変数と数学関数を使用して数学演算を簡単にします。

タイトルの下に派手な小さな枠線を付けたいが、完全な枠線は付けたくない場合はどうすればよいでしょうか?

これを実現するには、::after 要素を使用します。

.cool-border::after {
    content: "";
    display: block;
    height: 7px;
    background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 45%;
    transform: translateX(-50%) skew(-50deg);}.cool-border {
    position: relative;
}

この例では、擬似要素も絶対位置に配置します。 「境界線」のサイズは、新しい要素の高さによって異なります。これが右または左の「境界線」である場合は、要素の幅を使用してサイズを決定できます。

これはページ上の 1 つの要素にすぎないため、境界線にバイアスをかけることもできます。

スタイル タグを追加する必要のないスタイル要素を追加します。

は適切なセマンティック要素です。余分なマークアップで台無しにしないようにしましょう。

多くの ::after の例 (この記事の他の例も含む) では、疑似要素の位置が絶対であることがわかります。もちろん、これが必ずそうでなければならないという規則はありません。

::before と ::after をグリッド項目として使用して、

に引用符を配置しましょう。

すべてをグリッド上に明示的に配置することで、余分なラッパーについて心配する必要がなくなります。また、背景画像として引用符を使用し、単純なグリッド テンプレート列関数で最小最大スケーリングを許可することもできます。

最後に

#実際、CSS 疑似要素::after と ::before には多くの用途があります。実際のアプリケーションでも使用する必要があります。使用方法について話し合うためにメッセージを残すことを歓迎します。

以上がCSS 疑似要素::before および ::after の 3 つの使用法の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。