2015年04月28日

CSS疑似要素 :before / :after

スポンサード リンク

 CSS疑似要素 :before(::before) / :after(::after)

:before 擬似要素(CSS2) は、対象要素内の先頭に、  :after 擬似要素(CSS2) は
対象要素内の後尾に、contentプロパティで指定した内容を生成します。
コロン 二つ(::before)/(::after) の記法は、
擬似クラスと擬似要素の判別の為に、(CSS3)で導入されました。

   

先頭に文字列 ’ようこそ’を追加、  :before 疑似要素を使用。

:after 疑似要素 を使って、末尾に文字列 ’New!!’ を挿入.....

テキストの後ろに画像を挿入しました。  

これはツールチップ:after 擬似要素を使い スタイルシートだけで実現しています。

オンマウスでURLを表示します。
JavaScript スタイルシートサンプル集

このボックスに
:after 擬似要素で
線形グラデーション
background:linear-gradientを設定
背景を上から下に徐々に透過

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS疑似要素 :before(::before) / :after(::after)</title>
<style>
   /* サンプル前に追加  */
p.atrSmp1:before{   /*  :before擬似要素  */
	content: "ようこそ "; 
	font-size: 1.5em; 
	color: green;
		}
   /*後に追加  */
 p.atrSmp2:after{  /*  :after擬似要素  */
      content: " New!! "; /* contentプロパティ */
      font-size: 1.5em; 
      color: red;
         }

    /*画像を追加 */
 p.atrSmp3:after{
	content: url("http://*****/image/purin.gif") ;/* 画像 URL*/
	display:inline-block;   /* インラインブロック表示 */
	vertical-align : middle;/* 画像の左横テキスト 上下中央配置 */
		}
   /*ツールチップ */
 p.atrSmp4 span[data-text]{  /* カスタムデータ属性 */
      position: relative;/* 相対配置(相対位置)*/
      border-bottom:2px blue  dotted; /* 下枠線 太さ 色 線種(点線)*/
      color: #00f;
      cursor: help;  /* カーソルの形状 ヘルプ */
           }
   /*に, マウスホバー  ツールチップ追加 */
 p.atrSmp4 span[data-text]:hover:after{ 
	content: attr(data-text); /* 属性参照 attr(); 要素の属性の値取得 */
	position: absolute; /* 絶対配置(絶対位置) */
	left: 10px;
	top: 30px;
	width: 200px;
	border:3px solid #5a8f00;
	border-radius: 10px;
	background-color: #ffffcc;
	padding: 5px 15px;
	 color:#333;
		}
   /*に マウスホバー  吹き出し三角形 作成  */
p.atrSmp4 span:hover:before{ 
      content: "";
      position: absolute; 
      top: 23px;
      left:60px;
      border-top: 15px solid transparent;
      border-left: 15px solid #5a8f00;
         }
   /*href属性値 URL取得 */
 p.atrSmp5 a:hover:after{
	content:"  ( "attr(href) " )"; 
		}
   /*ボックス作成 */
 #atrSmp6{
     font-size:16px;font-weight : bold;
     color:#fff;
     background-color:blue;
     position: relative; /* 相対配置(相対位置)*/
     width: 450px; height: 110px; /* 横幅 高さ */ 
     padding:5px;
     text-align : center;
    }
   /*に, 線形グラデーション設定 */
 #atrSmp6:after{ 
	content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
     background: -webkit-linear-gradient(pink,transparent);
     background: -moz-linear-gradient(pink,transparent);
     background: -o-linear-gradient(pink,transparent);
     background:linear-gradient(pink,transparent);
         }
</style>
</head>
<body>
 <p class="atrSmp1">先頭にテキストを追加、 :before 疑似要素を使用。</p>
 <p class="atrSmp2"> :after 疑似要素 のサンプル、末尾に文字列 New!! を挿入.....</p>
 <p class="atrSmp3">テキストの後ろに画像を挿入しました。 </p>
 <p class="atrSmp4">これは
   <span data-text="tooltip , 注釈 , 補足説明">ツールチップ</span>を
   <span data-text="要素の直後に内容を挿入"> :after 擬似要素</span>を使い
   <span data-text="CSS , Cascading Style Sheets">スタイルシート</span>
          だけで実現しています。</p>
 <p class="atrSmp5">オンマウスでURLを表示します。<br />
  <a href="http://javascript123.seesaa.net/">JavaScript スタイルシートサンプル集</a>
</p>
<p id="atrSmp6">このボックスに <br />
  <code>:after</code> 擬似要素で<br />
  線形グラデーション<br />
  <code>background:linear-gradient</code>を設定<br />
  背景を上から下に徐々に透過
</p>
</body>
</html>

:before擬似要素 :after擬似要素
:before及び:after擬似要素は
対象要素内の先頭 / 末尾にコンテンツを追加します。
両擬似要素とも、追加する内容は、contentプロパティで指定します。
 ※contentプロパティには文字列、画像等のURIや連番などが設定可能です。
構文
element:before {     /* サンプル */
          content: "ようこそ "; /*先頭に付加する内容*/
          font-size: 2em; color: green; /* プロパティ: 値; */
                      }
element:after {      /* サンプル */
           content: New!! /* 末尾に付加する内容 */
            font-size: 2em; color: red; /* プロパティ: 値; */
                    }
element:after {     /* サンプル */
         content: url("http:image/purin.gif") ;/* 画像 URL*/
	display:inline-block;  /* インラインブロック表示 */
	vertical-align : middle;/* 画像の左横テキスト 上下中央配置 */
		}
カスタムデータ属性 (独自データ属性)
 HTML5から全てのHTML要素に先頭が「data-」で始まる、「data-☆☆☆ = "値"」の形式で
独自の属性を設定することが可能になりました。(複数設定も可)
☆☆☆は自分で設定します。
HTML
<p id="dokuji" data-text="属性"  data-tool="補足説明" >カスタムデータ</p>
CSS
#dokuji{ font-size: 2em;color : blue;}
#dokuji:hover:after{ /* マウスホバー */
     content: attr(data-text); /* attr(); 属性参照, 要素の属性の値取得 */
     color: red; }
結果
マウスオン ⇒ カスタムデータ
posted by javaScript at 20:52 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。