before after 넘버링 위치 질문. 채택완료
</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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
테트라포드1년 전
li의 before after 이고
top: 50%;transform: translateY(-50%);
볼드 처리된 글씨에 태그를 하나더 추가하여 해당 위치로 css를 변경하시거나 - ul>li>h4{중앙정령}
top: 10px;transform: translateY(0);
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택