before after 넘버링 위치 질문.

before after 넘버링 위치 질문.

QA

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; }

 

 

237506203_1722559513.8841.jpg

 

 

 

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);


등으로 수정하셔야 합니다.

잘 해결되시면 채택 한번 부탁드립니다^^
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT