実現したいこと
**イメージとしては **
結婚式当日【点線】ロケーション前撮り【点線】家族写真
発生している問題・分からないこと
コードを書いて試しているが
家族写真の右側にも点線が来てしまっている
試してみた結果を下記に展開
該当のソースコード
HTML
1<body> 2 <ul class="gallery-sec_category-link"> 3 <li><a href="#">結婚式当日</a></li> 4 <li><a href="#">ロケーション前撮り</a></li> 5 <li><a href="#">家族写真</a></li> 6 </ul> 7</body>
CSS
1ul, li, ol {2 list-style: none;3}4.gallery-sec_category-link {5 display: flex;6 flex-wrap: wrap;7 justify-content: flex-start;8 margin-top: 45px;9 padding: 0 0 0 8%;10}11.gallery-sec_category-link li {12 position: relative;13 margin-right: 30px;14}15.gallery-sec_category-link li::before {16 content: "";17 position: absolute;18 right: -14px;19 top: 50%;20 width: 1px;21 height: 9px;22 margin: -3px 0 0 0;23 background-image: linear-gradient(to bottom, #111, #111 1px, transparent 1px, transparent 2px);24 background-size: 1px 2px;25 background-repeat: repeat-y;26}
試したこと・調べたこと
上記の詳細・結果
リストの最後だけにクラスを追加してcontentを無しにする方法を試したが変化なし
補足
特になし
0 コメント