メニューで枠線をつけるにはどうすれば良いですか？

Question

上記のようなメニューを作りたいと思っています。

現状はこのような感じで作れたのですが、枠線をどう設定すればよいか分かりませんでした。
ご回答お願いします。
HTMLは長すぎたので下に貼りました。
https://harigami.jp/cd?hsh=2c1028fb-4167-408c-8eb5-69f6e5454fa0

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Roboto', sans-serif;
}
/* ナビゲーション */
.menu-container {
  background: #FDECE6;
  height:40px;
  a {
    color:black;
  }
  .menu-ttl a{
    font-size: 18px;
    font-weight: bold;
  }
  .menu-ttl i{
    margin-left:20px;
    
  }
}

.menu-mobile {
  display: none;
  padding: 20px;
  &:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-25%);
  }
}

.menu-dropdown-icon {
  &:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
  }
}

.menu {
  max-width:1140px;
  margin:0 auto;
  height: 40px;
  > ul {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    //position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
    > li {
      float: left;
      background: #FDECE6;
      padding: 0;
      margin: 0;
      a {
        text-decoration: none;
        line-height: 40px;
        display: inline-block;
        height:40px;
      }
      &:hover {
        background: #FDECE6;
      }
      > ul {
        display: none;
        width: 100%;
        background: #FDECE6;
        padding: 20px;
        position: absolute;
        z-index: 99;
        left: 0;
        margin: 0;
        list-style: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        &:before,
        &:after {
          content: "";
          display: table;
        }
        &:after {
          clear: both;
        }
        > li {
          margin: 0;
          padding-bottom: 0;
          list-style: none;
          width: 25%;
          background: none;
          float: left;
          a {
            color: #777;
            padding: .2em 0;
            width: 95%;
            display: block;
            border-bottom: 1px solid #ccc;
          }
          > ul {
            display: block;
            padding: 0;
            margin: 10px 0 0;
            list-style: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            &:before,
            &:after {
              content: "";
              display: table;
            }
            &:after {
              clear: both;
            }
            > li {
              float: left;
              width: 100%;
              padding: 10px 0;
              margin: 0;
              font-size: .8em;
              a {
                border: 0;
              }
            }
          }
        }
        &.normal-sub {
          width: 300px;
          left: auto;
          padding: 10px 20px;
          > li {
            width: 100%;
            a {
              border: 0;
              padding: 1em 0;
            }
          }
        }
      }
    }
  }
}

Comments

[m.ts10806]

>HTMLは長すぎたので

全てではなく最小構成のコードを作れば良いかと思います。
メニューの個数3個でも１０個でもCSSは同じです。
ただ、提示されたのはCSSではなくSCSSなので、これはこれですぐこちらで確認できません。コンパイルしたものを提示された方が良いかと思います。SCSSで通したいのでしたらタグの調整を。

Answer 1

こんにちは。

疑似要素を使ってはいかがですか？

  .menu {
//...
    > ul {
//...
      > li {
//...
        &::before {
            content:"|";
            font-size: 1.5em;
            margin: 0 1em;
        }

Comments

[takawork]

ありがとうございます。