teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コードにコメントを追加・それにともなう回答文の編集

2019/07/09 16:36

投稿

take-t.t.
take-t.t.

スコア360

answer CHANGED
@@ -1,10 +1,11 @@
1
1
  このような感じでどうでしょうか?
2
+ .menuのbackground-colorをコメントアウトしたり、.menu::afterのpositionの値を変えたりしてみると挙動が分かりやすいと思います。
2
3
 
3
- サンプル → [https://jsfiddle.net/gabky9z1/](https://jsfiddle.net/gabky9z1/)
4
+ サンプル → [https://jsfiddle.net/tu7wo8xp/](https://jsfiddle.net/tu7wo8xp/)
4
5
 
5
6
  ```html
6
7
  <div class="menu">
7
- <p>text</p>
8
+ <p>イタリアンレストラン</p>
8
9
  </div>
9
10
  ```
10
11
 
@@ -20,7 +21,7 @@
20
21
  top: -5px;
21
22
  bottom: -5px;
22
23
  left: -5px;
23
- right: -5px; /* 線の太さの調整 */
24
+ right: -5px; /* (擬似的に)線の太さの調整 */
24
25
  background: repeating-linear-gradient(45deg, green, green 5px, white 5px, white 10px, red 10px, red 15px);
25
26
  content: '';
26
27
  z-index: -1;