Draw separation borders between side-by-side menus: How to write in CSS? : 横並びメニューの間に区切り線を引く : CSSでどう書く?

by · 公開済み · 更新済み

例えば、フッターメニューの項目の間に区切り線を引く場合、CSSではどのように記述すれば良いのか?

HTMLはこんな感じ

    <ul>
        <li>HOME</li>
        <li>SHOP</li>
        <li>ABOUT</li>
        <li>CONTACT</li>
        <li>CART</li>
     </ul>

●ボーダーを項目の間

See the Pen separation borders by buzzlyhan (@buzzlyhan) on CodePen. 

        ul{
            /*init*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            display: flex;
            align-items: center;
            width: 800px;
            height: 50px;
            margin: 0 auto;
            background-color: #cfcfcf;
        }
        li{
            flex-grow: 1;
            text-align: center;
         }
         li:hover{
            background-color: #ff9a9a;
         }
        li + li{
            border-left: 2px solid #000;
        }

●ボーダーを項目の間と両端

        ul{
            /*init*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            display: flex;
            align-items: center;
            width: 800px;
            height: 50px;
            margin: 0 auto;
            background-color: #cfcfcf;
        }
        li{
            flex-grow: 1;
            text-align: center;
         }
         li:hover{
            background-color: #ff9a9a;
         }
        li + li{
            border-left: 2px solid #000;
        }
        li:first-child{
            border-left: 2px solid #000;
        }
        li:last-child{
            border-right: 2px solid #000;
        }

See the Pen separation borders1 by buzzlyhan (@buzzlyhan) on CodePen.

境界の線を自由に扱うならpositionによる設定が簡単かも知れません。

        ul{
            /*init*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            display: flex;
            width: max-content;
            margin: 0 auto;
        }
        li{
            position: relative;
            margin-right: 6em;
         }
        li:after{
            content: "";
            border-right: 2px solid #000;
            position: absolute;
            top:0;
            right: -3em;
            height: 20px;
        }

        li:first-child:before{
            content: "";
            border-right: 2px solid #000;
            position: absolute;
            top:0;
            left: -3em;
            height: 20px;
        }

おすすめ