css content で使えるコンテンツ


スポンサーリンク

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

<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>

スポンサーリンク