以下の図と同じように作る

WS000040.JPG

手順

  1. ul、li、aタグでHTMLを書く

  2. aタグに以下のCSSを付加する

    1. セレクタ：a
    text-decoration none
    color #999

  3. ulタグに以下のCSSを付加する

    1. セレクタ：ul
    list-style none

  4. liタグに以下のCSSを付加する

    1. セレクタ：ul li
    display inline

  5. liタグのafter疑似要素に以下のCSSを付加する

    1. セレクタ：ul li::after
    content “>”
    margin-left 5px

  6. 最後の子要素であるliのafter疑似要素に以下のCSSを付加する

    1. セレクタ：ul li:last-child::after
    content “”

解答例

https://www.youtube.com/embed/F7xBArgIZes?si=xVrIHGShGJlhbbaM

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">会社概要</a></li>
        <li>代表からの挨拶</li>
    </ul>
</body>

</html>

a {
    text-decoration: none;
    color: #999;
}

ul {
    list-style: none;
}

ul li {
    display: inline;
}

ul li::after {
    content: ">";
    margin-left: 5px;
}

ul li:last-child::after {
    content: "";
}