이렇게 하면 어떨까요?
- 먼저 마지막 이름이 지정된 링크 뒤에 쉼표를 추가합니다.
- 다음으로
...를 숨깁니다. - 그 다음
and more텍스트를 삽입합니다 – 기술적으로...를 위한 공간은 여전히 존재하므로, 이를 약간 뒤로 당깁니다. - (또한 다른 위치에서 발생할 수 있는 잠재적인 충돌을 피하기 위해 더 구체적인 선택자를 추가했습니다)
.user-main .about .secondary dd.groups span:last-of-type::after {
content: ",";
}
.user-main .about .secondary dd.groups:last-child > a {
visibility: hidden;
}
.user-main .about .secondary dd.groups:last-child > a::after {
visibility: visible;
margin-left: -.8rem;
content: "and more";
}
...를 플로우에서 완전히 제거하는 더 세련된 방법이 있을 수 있지만, 마이너스 마진 방식이 괜찮게 작동하는 것 같습니다.