flex - 03

beomhak lee·2024년 6월 3일

CSS

목록 보기
3/15

flex 기능으로 bullet 손쉽게 만들기

<ul class="info-list">
		<li class="info-list-item">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil fugit numquam aspernatur excepturi, eos soluta praesentium maiores commodi minus accusantium?
		</li>
		<li class="info-list-item">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam tempora nisi unde corrupti dicta.
		</li>
		<li class="info-list-item">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam consequatur alias, ducimus ea magnam nostrum repudiandae repellendus deleniti veniam? Assumenda expedita ad eum nihil!
		</li>
	</ul>
.info-list-item{
	display: flex;
	margin:0.5em 0;
	margin-bottom: 1,5em;
}
.info-list-item:before {
	content:"🍔";
	margin-right: 0.5em;
}

리스트에 display: flex; 선언해준뒤
가상선택자에 설정해주면 손쉽게 불릿을 만들수있다.

0개의 댓글