【CSS】擬似要素

  <p class="first-line">aaaaaaaaa</br>
     bbbbbbbbb</br>
     ccccccccc</br>
     ddddddddd</br>
  </p>
  <p class="first-letter">aaaaaaaaa</br>
     bbbbbbbbb</br>
     ccccccccc</br>
     ddddddddd</br>
  </p>

:first-line, :first-letterを使用

最初の行のみ、最初の文字のみスタイル変更することができる。

    p.first-line:first-line {
      color: red;
    }
    p.first-letter:first-letter {
      color: orange;
    }

結果

:before, :afterを使用

選択した要素の最初、最後の子要素として擬似要素を作成。 content プロパティが必要。

    p:before {
      content: "before";
      background-color: red;
    }
    p:after {
      content: "after";
      background-color: orange;
    }

結果