疑似要素で上下左右のボーダーがつけられない

Question

前提・実現したいこと

イタリアの国旗風な上下左右のストライプ柄のボーダーを付けたいです。

発生している問題・エラーメッセージ

上下のボーダーはつけることが出来たのですが、
左右につけようとすると上書きされて上下が消えました。
まとめればいいのかとも思いましたがblockとinline-blockを使っているのでまとめ方がわかりませんでした。
もしくはこれ以外の方法でつける方法を知りたいです。

あと、左右だけつけた場合にheightを高くすると文字だけが一番下に行ってしまいます。
line-heightをつけても変わりませんでした。

該当のソースコード

<div class="menu">
 <p>イタリアンレストラン</p>
</div>

.menu{
  p{
    display: inline-block;
    height:15px;
    margin:10px;
//上下
    &::before,
    &::after{
      content:"";
      display: block;
      width:100%;
      background:repeating-linear-gradient(45deg,green, green 5px, white 5px, white 10px,red 10px,red 15px);
      height:5px;
    }
//左右
    // &::before,
    // &::after{
    //   content:"";
    //   display: inline-block;
    //   height:100%;
    //   background:repeating-linear-gradient(45deg,red, red 5px, white 5px, white 10px,green 10px,green 15px);
    //   width:5px;
    // }
  }
}

Answer 1

すでに終了していますが、正攻法と思われる回答がないので書いておきます。

.menu p {
  border: 5px solid #cc6;
  border-image: repeating-linear-gradient(45deg, green, green 5px, white 5px, white 10px, red 10px, red 15px) 5 / 5px repeat;
}

https://developer.mozilla.org/ja/docs/Web/CSS/border-image

Comments

[syuus]

kuroyuさんへ。
自分のやり方はシンプルではなく無駄が多いので、x_xさんのコードを参考にしてください。

Answer 2

x_xさんの回答のほうが正攻法なので、そちらを参照してください。

単純に背景と文字を分けてしまえば簡単に実現できるかと思います。

<div class="menu">
  <p>イタリアンレストラン</p>
</div>

* {
  margin: 0;
  padding: 0;
}

.menu {
  background: repeating-linear-gradient(45deg, green, green 5px, white 5px, white 10px, red 10px, red 15px);
  display: inline-block;
  padding: 5px;

  p {
    background: #fff;
  }
}

どうしても ::before ::after で書きたいのであれば、こんな書き方も可能です。
おすすめはしません。なるべくシンプルに書いたほうが良いかと思います。

p {
  display: inline-block;
  position: relative;
  background: #fff;
}

p::after {
  background: repeating-linear-gradient(45deg, green, green 5px, white 5px, white 10px, red 10px, red 15px);
  content: '';
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: -1;
}

Answer 3

このような感じでどうでしょうか？
.menuのbackground-colorをコメントアウトしたり、.menu::afterのpositionの値を変えたりしてみると挙動が分かりやすいと思います。

サンプル　→　https://jsfiddle.net/tu7wo8xp/

<div class="menu">
  <p>イタリアンレストラン</p>
</div>

.menu {
  position: relative;
  background-color: white;
  width: 10em; /* サイズは調整してください */
}

.menu::after {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px; /* （擬似的に）線の太さの調整 */
  background: repeating-linear-gradient(45deg, green, green 5px, white 5px, white 10px, red 10px, red 15px);
  content: '';
  z-index: -1;
}

Comments

[kuroyu]

afterでどうにかすることしか頭にありませんでした・・・
重ねてしまえば見た目は同じですね！ありがとうございました。