CSS3.0のセレクタ - 擬似要素

・E::first-letter : E 要素の先頭文字
・E::first-line : E 要素の最初の整形済行
・E::before : E 要素の内容の前にある生成コンテンツ。なお、生成コンテンツはインライン要素になる。
・E::after : E 要素の内容の後にある生成コンテンツ。なお、生成コンテンツはインライン要素になる。

E::first-letter
E::first-line

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> :first-letter </title>
   <style type="text/css">
        /*
        ::first-letterと::first-lineはブロック要素(p, div, section など)だけに効く。
        span要素に使う際には、
        1. height,width属性設定、
        2. もしくはposition=absoluteか
        3. display=block設定
        */
        span {
            display:block;
        }
        
        /* idがfirst-spanの子要素の最初の文字 */
        span[id=first-span]::first-letter{
            color:#f00;
            font-size:20pt;
        }
        section::first-letter{
            color:#00f;
            font-size:30pt;
            font-weight:bold;
        }
        /* pの最初の行 */
        p::first-line{
            color:#00f;
            font-size:40pt;
            font-weight:bold;
        }
    </style>
</head>
<body>
<span id="first-span">ABC</span>
<section>12345</section>
<p>p要素の1行目 <br/>
p要素の2行目</p>
</body>
</html>

f:id:liguofeng29:20160127210451p:plain

E::before E::after

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> content </title>
   <style type="text/css">
        /* divの子要素divの後に文字を追加する */
        div>div::after{
            content: '.......';
            color:blue;
            font-weight:bold;
            background-color:gray;
        }
        /* divの子要素divの前ににロゴを追加する */
        div>div::before{
            content: url("logo.jpg");
        }
    </style>
</head>
<body>
    <div>
    <div>Java</div>
    <div>Android</div>
    <div>Java EE</div>
    </div>
</body>
</html>

f:id:liguofeng29:20160127211650p:plain

liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のセレクタ - 擬似要素