DEMO

意外に知らなかったcontentの使い方

テキスト

<div class="box">
    <p class="text">株式会社です。</p>
  </div>

株式会社です。

画像/ファイル

<div class="box">
    <p class="img">先頭に画像が入ります。</p>
  </div>

先頭に画像が入ります。

プロパティの値

<div class="box">
    <a href="http://sterfield.co.jp/" title="スターフィールド株式会社" class="link">のHPはこちら</a>
  </div>
のHPはこちら

カウンター

<div class="box">
    <ul class="counter">
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
    </ul>
  </div>
  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト
  • テキストテキストテキスト

quoteを入れる

<div class="box">
    <div class="address">
    スターフィールド株式会社<br>
    〒169-0075<br>
    東京都新宿区高田馬場1-25-32 108ビル 3F</div>
  </div>
スターフィールド株式会社
〒169-0075
東京都新宿区高田馬場1-25-32 108ビル 3F

content,beforeを使って吹き出しを作ってみる

<div class="box">
    <div class="fukidashi">
      cssを使った吹き出し
    </div>
  </div>
cssを使った吹き出し