71753


**現象**  
区切り線だけ表示されて「または」というテキストが表示されないです。

**期待値**  
区切り線の途中に「または」というテキストを表示したいです。

**再現手順**  
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone
5/SEでの画面を表示させて出てきたものを模写コーディングしています。

下記のコードを、ChromeかEdgeのデバイスエミュレーションでiPhone 5/SEの設定で実行しますと再現できます。  
なお、まだ作りかけですのでHTMLもCSSも不完全です。

[code]

    <!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>
    
[/code]

[code]

    @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;
    }
    
[/code]


CC BY-SA 4.0
2020-11-04T17:08:50.270
71734
2020-11-07T03:26:50.167
2020-11-06T16:25:22.407
36906
36906
question
css html5
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。


> 区切り線だけ表示されて「または」というテキストが表示されないです。

`hr` 要素のユーザーエージェントスタイルシートに [`overflow:
hidden`](https://developer.mozilla.org/ja/docs/Web/CSS/overflow)
が指定されている一部のブラウザでは、テキストがパディング領域で切り取られ想定通りに表示されない、という現象が発生します。このため、

  * `hr` 要素に `overflow: visible` を設定する
  * `padding` プロパティでテキストが切り取られないように余白を確保しておく

などの対処策が必要になります。次のコードでは前者の方法を用いています。また、文字周辺の線を消すために `background-color`
プロパティを使っています。

[code]

    * {
        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;
        overflow: visible; /* 追加 */
    }
    
    .login-form hr::before {
        content: "または";
        display: inline-block;
        position: relative;
        top: -12px;
        padding: 0 10px;
        font-size: 20px;
        background-color: #fff; /* 追加 */
    }
[/code]

[code]

    <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>
[/code]

もしくは、 Flexbox を用いて `::before`, `::after` 要素の間にテキストを入れることでも、同様の装飾を行えます。この場合は
`overflow` プロパティについて特に注意する必要はありません。

[code]

    * {
      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;
    }
    
    .hr { /* 追加 */
      display: flex;
    }
    
    .hr::before,
    .hr::after { /* 追加 */
      content: "";
      flex: 1;
      border-top: 1px solid;
      transform: translateY(50%);
    }
[/code]

[code]

    <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="ログイン">
      <div class="hr">
        または
      </div>
      <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>
[/code]


CC BY-SA 4.0
2020-11-05T13:15:41.520
71753
2020-11-07T03:26:50.167
2020-11-07T03:26:50.167
32986
32986
71734
answer