CSS B5 〜擬似要素before、after〜

下記のWebページを内部スタイルシート形式で作成してください。
事前準備
ヒント
こたえ
- ソースコード

下記のWebページを内部スタイルシート形式で作成してください。

下記の擬似要素before、afterを利用して、下記のWebページを内部スタイルシート形式で作成してください。

事前準備

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。

「webst8」フォルダの中に「css-lesson-b5」フォルダを作成して、Atomで「lesson-b5.html」を新規作成します。

以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson-b5.html」に内部スタイルシート形式でCSSを記述していってください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSS</title>
  <style media="screen">
  li{
    list-style: none;
    line-height: 2;
  }
  li:???{
    ???: '◀︎';
  }
  li:???{
    ???: '▶︎';
   }
  </style>
</head>
<body>
    <ul>
      <li>HOME</li>
      <li>PROFILE</li>
      <li>WORKS</li>
      <li>CONTACT</li>
    </ul>    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

li{

list-style: none;

line-height: 2;

}

li:???{

???: '◀︎';

}

li:???{

???: '▶︎';

}

</style>

</head>

<body>

<ul>

<li>PROFILE</li>

<li>WORKS</li>

<li>CONTACT</li>

</ul>

</body>

</html>

一通り記述できたら上書き保存して「lesson-b5.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。

ヒント

擬似要素は、(状態の変化に関わらず)要素の一部を追加で指定する方法で、以下のように指定します。

セレクタ::擬似要素{
任意のスタイル…
}

擬似要素を利用することで、HTMLコードに不要なタグやコードを減らしつつ、要素内の特定の文字や行に対して色々なスタイルを設定することができます。

なお、擬似クラスがある要素が特定の状態になったときに指定する方式(状態の変化に対する指定方式)なのに対して、擬似要素は、(状態の変化に関わらず)要素の一部を追加で指定する方法という点が異なります。

本問題で利用しているのは、擬似要素before、afterです。

詳細は下記をご参照ください。

2-2. ある要素の直前に作成する擬似要素 ::before、2-3. ある要素の直後に作成する擬似要素 after

こたえ

ソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSS</title>
  <style media="screen">
  li{
    list-style: none;
    line-height: 2;
  }
  li:before{
    content: '◀︎';
  }
  li:after{
    content: '▶︎';
   }
  </style>
</head>
<body>
    <ul>
      <li>HOME</li>
      <li>PROFILE</li>
      <li>WORKS</li>
      <li>CONTACT</li>
    </ul>    
</body>
</html>