# 사이트 공개 전 마지막 문제

**URL:** https://meta.discourse.org/t/my-last-problem-before-publishing-the-site/307767
**Category:** Development
**Created:** [5월 13, 2024, 2:57오후 UTC](https://meta.discourse.org/t/my-last-problem-before-publishing-the-site/307767 "2024-05-13T14:57:21Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [5월 13, 2024, 2:57오후 UTC](https://meta.discourse.org/t/my-last-problem-before-publishing-the-site/307767/1 "2024-05-13T14:57:21Z")

</div>

여러분 안녕하세요,  
저희 사이트를 홍보하기 시작했습니다. 마지막으로 만난 문제를 해결하고 싶습니다. 도와주세요 🙏

아래 코드를 사용 중입니다. 불필요한 부분은 제거했습니다.  
이 코드들에서 데스크톱 탭과 모바일 탭에는 해당 필드를 추가하지 않았습니다.

> [@Can it be done with CSS? Grouping categories on category page](https://meta.discourse.org/t/can-it-be-done-with-css-grouping-categories-on-category-page/112433/4):
>
> A bit late smile but maybe someone else needs it. I must mention that: Not all the CSS code is required, especially the borders and the background colors for table rows, so feel free to adjust them as you like. I had to change the layout from the regular table into flex cause you can’t have negative margins on table rows and other layout issues, and well..is more flexible smileReplace Category Group 1 and Category Group 2 with your desired category group names In my example I’ve used the …

```plaintext
/* kategori */
body .category-list [data-category-id="37"],body .category-list [data-category-id="37"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="37"]::before {
    content: "▼ YAPIMCISINDAN MMORPG";
}
body [data-category-id="37"]::before,body [data-category-id="37"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: rgb(247, 247, 255,.9);
    border-left: 3px solid #e53967;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #36364d;
}

body [data-category-id="31"]::before,body [data-category-id="31"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: rgb(247, 247, 255,.9);
    border-left: 3px solid #e53967;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #36364d;
}

body .category-list [data-category-id="31"],body .category-list [data-category-id="31"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="31"]::before {
    content: "▼ PRIVATE SERVER MMORPG";
}
/* kategori */

```

F12를 통해 코드를 제거하면 배경 이미지가 다시 나타납니다.  
하지만 이 코드들이 존재할 때는 나타나지 않습니다.

 ![Ekran görüntüsü 2024-05-13 175243](https://global.discourse-cdn.com/meta/original/4X/e/2/c/e2c76002ec4e2b7ebbb63ff9644b490bb0f97a11.png)  
 ![Ekran görüntüsü 2024-05-13 175333](https://global.discourse-cdn.com/meta/original/4X/2/a/5/2a58052bcc7c4ab4a7d62b711b16af74c72b9e9c.png)

[https://pvpfarm.com](https://pvpfarm.com)

도움을 주실 분들께 미리 감사드립니다.  
작동하지 않으면 해당 코드들을 제거할 것입니다.  
하지만 이 코드들은 사이트에 유용하여 카테고리를 분리할 수 있으므로, 이를 정리할 수 있다면 좋겠습니다.

---

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [5월 13, 2024, 3:30오후 UTC](https://meta.discourse.org/t/my-last-problem-before-publishing-the-site/307767/2 "2024-05-13T15:30:12Z")

</div>

코드를 `:before`에서 `:after`로 변경했습니다.  
이렇게 하면 문제가 해결되었습니다.  
이것이 최종적인 해결책인가요?