before after 넘버링 위치 질문. 채택완료
myfree
1년 전
조회 11,572
</p>
<p><ul>
<li>결과 먼저 말하기
<ol>
<li>보고를 받는 사람 관점에서 보고합니다.</li>
<li>중요하고 긴급한 사항부터 보고합니다.</li>
<li>중간보고는 철저히, 가능한 빨리 보고합니다.</li>
</ol>
</li></p>
<p>
<li>핵심을 신속하게
<ol>
<li>빠른 보고는 상관의 의사결정을 앞당길 수 있습니다.</li>
</ol>
</li>
</ul></p>
<p>
</p>
<p>ul { counter-reset: colorcircle 0; }</p>
<p>ul > li { position:relative; font-weight:bold; }</p>
<p>ul > li::before { counter-increment: colorcircle 1; content: counter(colorcircle); </p>
<p> position: absolute; top: 50%; left: 0.5rem; }</p>
<p>ul > li::after { content: ''; position: absolute; top: 50%; left: 0;
transform: translateY(-50%); display: inline-block;
background-color: #999; border-radius: 50%; }</p>
<p> </p>
<p>ol { padding-left:20px; }</p>
<p>ol > li { font-weight:normal; }</p>
<p>
http://sir.kr/data/editor/2408/237506203_1722559513.8841.jpg" />
counter-reset을 이용한 before after 넘버링이 중앙정렬이 되버립니다.
저는 bold 처리된 글자 옆으로 붙게 하고 싶은데요.
뭐가 문제일까요.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><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; }</p>
<p> </p>
<p>
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></p>
<p><ul>
<li>결과 먼저 말하기
<ol>
<li>보고를 받는 사람 관점에서 보고합니다.</li>
<li>중요하고 긴급한 사항부터 보고합니다.</li>
<li>중간보고는 철저히, 가능한 빨리 보고합니다.</li>
</ol>
</li></p>
<p><li>핵심을 신속하게
<ol>
<li>빠른 보고는 상관의 의사결정을 앞당길 수 있습니다.</li>
</ol>
</li>
</ul></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인