現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、ChromeかEdgeのデバイスエミュレーションでiPhone 5/SEの設定で実行しますと再現できます。
なお、まだ作りかけですのでHTMLもCSSも不完全です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook-copy</title>
<link rel="stylesheet" href="stylesheet.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<header>
<div class="header-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<p class="header-text">iPhone用Facebookで高速ブラウジング。</p>
</header>
<img class="facebook-logo-image" src="./image_0.svg" alt="facebookのロゴ">
<form class="login-form" action="#">
<input type="email" placeholder="携帯電話番号またはメールアドレス" required name="mail">
<input type="password" placeholder="パスワード" required name="pw">
<input type="submit" value="ログイン">
<hr>
<a href="#">パスワードを忘れた場合</a>
<button name="create-account">新しいアカウントを作成</button>
</form>
<div class="under-login-form-text">
<p>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></p>
</div>
<div class="language">
<p>日本語</p>
<a href="#">English (US)</a>
<a href="#">Português (Brasil) </a>
<a href="#">中文(简体) </a>
<a href="#">Español</a>
<a href="#">Français (France) </a>
<a href="#">Deutsch</a>
<button>+</button>
</div>
<div class="under-menu">
<a href="#">Facebookについて</a>
<p>・</p>
<a href="#">ヘルプ</a>
<p>・</p>
<a href="#">その他</a>
</div>
<footer>
<small>Facebook Inc.</small>
</footer>
</body>
</html>
stylesheet.css
@charset "UTF-8";
/* 基本設定 */
* {
margin: 0;
font-family: sans-serif;
}
/* ページ全体の設定 */
body {
display: grid;
grid-template-columns: 15px 52px 1fr 52px 15px;
grid-template-rows:
[head] 45px
[facebook-logo] 40px
[login-form-row] 175px
[or] 15px
[create-new-account] 51px
[forget-password] 27px
[blank-middle] 35px
[language] 85px
[under-menu] 11px
[copy-right] 15px
[blank-footer] 7px;
}
/* ヘッダー */
header {
grid-column: 1 / -1;
grid-row: head;
background-color: #fffbe2;
display: flex;
justify-content: center;
align-items: center;
color: #576b95;
font-size: 14px;
}
.header-icon {
margin-right: 5px;
}
/* facebookロゴ */
.facebook-logo-image {
grid-column: 3 / -3;
grid-row: facebook-logo;
width: 112px;
height: 39.42px;
margin: 0 auto;
}
/* ログインフォーム */
.login-form {
grid-column: 2 / -2;
grid-row: login-form-row;
display: flex;
flex-direction: column;
margin-top: 15px;
width: 100%;
}
.login-form input {
line-height: 41px;
margin-bottom: 4px;
border-radius: 5px;
border-top: none;
border-left: 0.1px solid #757575;
border-right: 0.1px solid #757575;
border-bottom: 0.1px solid #757575;
background-color: #f5f6f7;
color: #fcfcfc;
}
.login-form input[type="submit"] {
margin-top: 4px;
background-color: #1877f2;
font-weight: bold;
font-size: 17px;
color: white;
border: none;
}
.login-form hr {
margin-top: 30px;
border: none;
border-top: 1px solid;
text-align: center;
}
.login-form hr::before {
content: "または";
display: inline-block;
position: relative;
top: -12px;
padding: 0 10px;
font-size: 20px;
}