CSS 擬似要素に挑戦!擬似要素楽しい!
2020年月日 学習の内容・課題の進捗
学習19日目
実施項目
CSS上級課題 擬似要素に挑戦
- 擬似要素いれる時は content: ""; をいれる。 display:block; いれる
-モダンな四角形
.main-header__title { position: relative; display: flex; flex: 1; align-items: center; padding: 20px 0 20px 70px; font-size: 35px; font-weight: 800; background-color: white; line-height: 1.3; } .main-header__title::before { position: absolute; display: block; content: ""; top: 30px; left: 20px; width: 24px; height: 12px; background-color: #3D3D3D; border-left: solid 12px #6F6F6F; } .main-header__title::after { position: absolute; display: block; content: ""; top: calc(30px + 12px); left: 20px; width: 24px; height: 12px; background-color: #3D3D3D; border-right: solid 12px #6F6F6F; }
-モダンな長方形
.article__title { display: flex; justify-content: start; align-items: center; position: relative; flex-basis: 70px; scroll-padding-left: 10px; padding: 0 0 0 50px; font-size: 30px; font-weight: 600; line-height: 1.3; } .article__title::before { position: absolute; display: block; content: ""; top: 16px; left: 20px; width: 12px; height: 20px; background-color: #999999; } .article__title::after { position: absolute; display: block; content: ""; top: calc(16px + 20px); left: 20px; width: 12px; height: 20px; background-color: #3D3D3D; }
途中経過
https://codepen.io/yoshihiroueki/pen/jOPaNEG
## 1日の振り返り CSS少しずつ理解できて楽しくなってきた!
明日の学習
CSSの上級の課題を提出