“content”の値を要素内にあるコンテンツの直後に配置
プロパティ”content”で指定した値を、指定された要素内にあるコンテンツの直後に配置する。
要素内にコンテンツが存在しないタグに使用することはできない。（ex. img,br …）
なおCSS2までは「:after」、CSS3では「::after」と書く。
要素内の文字列の後に記号や文字列などを追加
要素内の文字列の後ろに「>」や「→」などの記号を追加する
<ul>
<li class="arrow"><a hrf="#">ここをクリック</a></li>
<li class="new"><a hrf="#">今日の出来事</a></li>
</ul>.arrow a::after {
content: ">";}
.new a::after {
content: "new!";}::afterに背景色を付ける
指定された要素内にあるコンテンツの直後に配置するだけかと思ったら、背景色やpadding,margin左右等も付けられる。
<ul>
<li class="new2"><a hrf="#">今日の出来事</a></li>
</ul>.new2 a::after {
content: "new!";
margin: 0 10px:
padding: 0 5px;
background-color: #ff0000;
color: #ffffff;}要素内の文字列の後ろに画像を追加する
contentには画像も指定できる。
<ul>
<li class="new3"><a hrf="#">今日の出来事</a></li>
</ul>.new3 a {
position: relative;
padding-right: 35px; }
.new3 a::after {
content: url(../../../images/info_b.svg);
position: absolute;
top: -5px;
right: 0; }ポップアップの吹き出しを付ける
aタグにカーソルを合わせたときに表示される吹き出しを付ける
<ul>
<li class="new5"><a href="#" data-toolchip="今日の出来事を記載してます">今日の出来事</a></li>
</ul>.new5 a[data-toolchip] {
position: relative; }
.new5 a[data-toolchip]:hover::after {
content: attr(data-toolchip);
position: absolute;
left: 20px;
top: 20px;
width:200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #ffffcc;
color: #555;
font-size: 14px;
z-index: 1; }attr() は CSS の関数で要素の属性の値を受け取ります。
コメント