css content で使えるコンテンツ
使わないと思うけど、動的に変化させられるのでメモっておきます。
content:attr(パラ)
href リンク先を表示する
AA<a href="http://tecinfo.yuzumaru.co.jp/wp/">AA</a> <style> a:after{ content: "("attr(href)")"; } </style>
title タイトル属性を表示する
スポンサーリンク
<P><a href="#" title="ゆずまるの技術情報 照月"> <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/10/222.jpg" alt="ゆずまるの技術情報画像 照月" /> </a> </P> <style> a:after{ content: " ("attr(title)") "; display: block; ←改行のみそ } </style>かといって 画像の alt は表示できないって間抜けな仕様
counter 連番
counter(変数) って使うTEST
TEST
TEST
- TEST
- TEST
- TEST
<h4>TEST</h3>
<h4>TEST</h3>
<h4>TEST</h3>
<style>
h4:after{
content: " (" counter(section) ")";
}
h4{
counter-increment: section;
margin: 13px 0 3px;
}
</style>
<ul>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
<style>
li:after{
content: " (" counter(section1) ")";
}
li{
counter-increment: section1;
margin: 13px 0 3px;
}
</style>
url 画像
たぶんこれが一番使える
TEST
- TEST
- TEST
- TEST
<h4>TEST</h3>
<h4>TEST</h3>
<h4>TEST</h3>
<style>
h4:after{
content: " (" counter(section) ")";
}
h4{
counter-increment: section;
margin: 13px 0 3px;
}
</style>
<ul>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
<style>
li:after{
content: " (" counter(section1) ")";
}
li{
counter-increment: section1;
margin: 13px 0 3px;
}
</style>
url 画像
たぶんこれが一番使える
TEST
<p class="a4">TEST</p> <style> p.a4:before { content:url("http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/10/ar_0b_orange.png"); } </style>