CSS ::before 疑似要素| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

::before 疑似要素 CSS プロパティとは

トピック：選択した要素の内容の前に擬似要素を作成する、ことができる contentプロパティを使用して、要素に装飾的な内容を追加挿入するコンテンツを指定

疑似要素 セレクター ::before

実例 コード 1

サンプル コードを試す
    p::before { 
         content: "→";
    } 
    /* <p>要素の前に矢印を追加 */

CSSコード：例

    q::before{
       content:"''";   color: blue;
    }    q::after{
       content:"''";   color: red;
    }
    /* <q>引用符を ::before および ::after の両方に追加 */

構文

::before { css : properties ; }
 疑似要素名 {スタイル要素のプロパティ : プロパティ値; }
CSS バージョンCSS 3　::before
CSS バージョンCSS 2　:before
    情報：
  • メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::before の表記法（ダブルコロン）が導入されたブラウザーでは CSS2 で導入された :before も使用できます。

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
::beforeChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ありフルサポート◯ありフルサポート◯1.5フルサポート◯9フルサポート◯7フルサポート◯4
アニメーションとトランジションのサポートフルサポート◯26フルサポート◯ありフルサポート◯4サポートなし✖サポートなし✖サポートなし✖

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
::beforeAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯あり 不明フルサポート◯あり 不明 不明 不明 不明
アニメーションとトランジションのサポートフルサポート◯あり 不明フルサポート◯ありフルサポート◯4サポートなし✖サポートなし✖ 不明
：::before 疑似要素 関連記事
CSS ::before 疑似要素| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS ::before 疑似要素 | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS