before after 넘버링 위치 질문.
본문
<ul>
<li>결과 먼저 말하기
<ol>
<li>보고를 받는 사람 관점에서 보고합니다.</li>
<li>중요하고 긴급한 사항부터 보고합니다.</li>
<li>중간보고는 철저히, 가능한 빨리 보고합니다.</li>
</ol>
</li>
<li>핵심을 신속하게
<ol>
<li>빠른 보고는 상관의 의사결정을 앞당길 수 있습니다.</li>
</ol>
</li>
</ul>
ul { counter-reset: colorcircle 0; }
ul > li { position:relative; font-weight:bold; }
ul > li::before { counter-increment: colorcircle 1; content: counter(colorcircle);
position: absolute; top: 50%; left: 0.5rem; }
ul > li::after { content: ''; position: absolute; top: 50%; left: 0;
transform: translateY(-50%); display: inline-block;
background-color: #999; border-radius: 50%; }
ol { padding-left:20px; }
ol > li { font-weight:normal; }
counter-reset을 이용한 before after 넘버링이 중앙정렬이 되버립니다.
저는 bold 처리된 글자 옆으로 붙게 하고 싶은데요.
뭐가 문제일까요.
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<style>
ul { counter-reset: colorcircle 0; }
ul > li { position:relative; font-weight:bold; }
ul > li::before { counter-increment: colorcircle 1; content: counter(colorcircle);
position: absolute; top: 50%; left: 0.5rem; }
ul > li::after { content: ''; position: absolute; top: 50%; left: 0;
transform: translateY(-50%); display: inline-block;
background-color: #999; border-radius: 50%; }
ol { padding-left:20px; }
ol > li { font-weight:normal; }
ul, ol {
list-style-type: none;
}
ul > li::before {
background-color: #999;
color: #fff;
padding: 0 0.3em;
border-radius: 50%;
top: 0;
left: -1.5rem;
}
</style>
<ul>
<li>결과 먼저 말하기
<ol>
<li>보고를 받는 사람 관점에서 보고합니다.</li>
<li>중요하고 긴급한 사항부터 보고합니다.</li>
<li>중간보고는 철저히, 가능한 빨리 보고합니다.</li>
</ol>
</li>
<li>핵심을 신속하게
<ol>
<li>빠른 보고는 상관의 의사결정을 앞당길 수 있습니다.</li>
</ol>
</li>
</ul>
li의 before after 이고
top: 50%;transform: translateY(-50%);
중앙 정렬을 하셨으니 당연히 li의 중앙으로 정렬됩니다.
볼드 처리된 글씨에 태그를 하나더 추가하여 해당 위치로 css를 변경하시거나
- ul>li>h4{중앙정령}
top: 10px;transform: translateY(0);
등으로 수정하셔야 합니다.
잘 해결되시면 채택 한번 부탁드립니다^^
답변을 작성하시기 전에 로그인 해주세요.
