HTML-LABS : CSS（スタイルシート）解説 - 要素の直後に文字列や画像を表示する方法 : :after

Home / 要素の直前・直後に文字列や画像を表示する設定 / 要素の直後に文字列や画像を表示する方法 : :after

要素の直後に文字列や画像を表示する方法 : :after

::: 書式 :::

・直後に文字列を表示する場合
　　要素名:after{ content: "文字列" }

・直後に画像を表示する場合
　　要素名:after{ content: url(画像のURL) }

::: 解説 :::

「:after」で要素の直後に、文字列や画像を表示します。

「要素名」部分には、「#ID名」「.クラス名」も指定できます。

::: 対応ブラウザ :::

IE					Firefox					Opera					Chrome		Safari
8	7	6	5.5	5	3.5	3	2	1.5	1	10	9	8	7	6	2	1	4	3	2	1
○	×	×	×	×	○	○	○	○	○	○	○	○	○	△	○	○	○	○	○	○

[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]

::: サンプル :::　[ サンプル画面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>スタイルシート(CSS) = 要素の直後に文字列や画像を表示する方法 =</title>

<style type="text/css">
<!--
#id01:after
{  content: "[HTML-LABS]";
   background-color: #0000ff;
   color: #ffffff;
}
-->
</style>

</head>
<body>
    スタイルシート(CSS) = 要素の直後に文字列や画像を表示する方法 =
    <p id="id01">このp要素の直後に文字列を表示します。</p>
</body>
</html>


	関連項目

	CSSの基本 CSS機能別プロパティ一覧 CSSインデックス要素の直前・直後に文字列や画像を表示する設定 :before :after content quotes

　

Copyright (C) 2009 Html-Labs All Rights Reserved.