番外編:疑似要素の練習
番外編:疑似要素の練習
LUNCH テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】疑似要素の練習</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"> </head> <body> <div class="content"> <h2 class="title">LUNCH</h2> <p class="text"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> <img src="img/lunch.jpg" alt=""> </div><!-- /.content --> </body> </html>
@charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; border: none; } img { max-width: 100%; vertical-align: bottom; } /* ---------------------------------------- body ---------------------------------------- */ body { color: #444; font-size: 16px; font-family: 'Open Sans', sans-serif; line-height: 1.0; letter-spacing: 1.2px; } /* ---------------------------------------- layout ---------------------------------------- */ .content { margin: 100px auto; padding: 0 20px; } .title { position: relative; margin-bottom: 50px; padding-left: 120px; font-size: 20px; line-height: 1.5; } .title::before { position: absolute; top: 50%; left: 0; content: ""; width: 90px; height: 1px; background-color: #676767; } .text { width: 460px; margin-bottom: 80px; line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .content { max-width: 800px; } }