ul、li、aタグでHTMLを書く
aタグに以下のCSSを付加する
text-decoration | none |
---|---|
color | #999 |
ulタグに以下のCSSを付加する
list-style | none |
---|
liタグに以下のCSSを付加する
display | inline |
---|
liタグのafter疑似要素に以下のCSSを付加する
content | “>” |
---|---|
margin-left | 5px |
最後の子要素であるliのafter疑似要素に以下のCSSを付加する
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: "";
}