回答編集履歴
1
コードにコメントを追加・それにともなう回答文の編集
answer
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
このような感じでどうでしょうか？
|
|
2
|
+
.menuのbackground-colorをコメントアウトしたり、.menu::afterのpositionの値を変えたりしてみると挙動が分かりやすいと思います。
|
|
2
3
|
|
|
3
|
-
サンプル → [https://jsfiddle.net/
|
|
4
|
+
サンプル → [https://jsfiddle.net/tu7wo8xp/](https://jsfiddle.net/tu7wo8xp/)
|
|
4
5
|
|
|
5
6
|
```html
|
|
6
7
|
<div class="menu">
|
|
7
|
-
<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;
|