CSS疑似要素 :before / :after

<< sliceメソッド JavaScript | TOP | 三角形を CSS で作る >>

2015年04月28日

CSS疑似要素 :before / :after

スポンサード　リンク

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

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

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

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

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

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

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

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

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円～容量最大１２０ＧＢ！大人気の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">オンマウスでＵＲＬを表示します。<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; }
結果: マウスオン ⇒ カスタムデータ

タグ：疑似要素 :before CSS疑似要素 :b :after

posted by javaScript at 20:52 | 大阪 ☁ | スタイルシート CSS |

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

JavaScript スタイルシートサンプル集

2015年04月28日