before 과 after 질문입니다.

before 과 after 질문입니다.

QA

before 과 after 질문입니다.

본문

<ul class="top-member-menu">
<li><a href="<?=G5_BBS_URL?>/logout.php"><img src="/main/img/top_bt_icon03.png">로그아웃 </a></li>
<li><a href="<?=G5_URL?>/main/member/join.php"><img src="/main/img/top_bt_icon02.png">회원가입 </a></li>
<li><a href="<?=G5_URL?>/main/member/login.php"><img src="/main/img/top_bt_icon03.png">로그인 </a></li>
<li><a href="<?=G5_URL?>/main/member/mypage.php"><img src="/main/img/top_bt_icon01.png">신청내역확인</a></li>
</ul>

 

.top-member-menu li {float:left; margin-left:30px;}
.top-member-menu li::before {content:"|"; padding-right:20px;}
.top-member-menu li:first-child::before {content:none;}
.top-member-menu a {display:inline-block; text-align:center;}
.top-member-menu img {display:block; margin:0 auto;}

 

이렇게 했는데 그림 밑으로 글씨를 배치하긴 했는데 수직선이 글씨옆에만 되고 그림옆엔 안되네요...

그림 밑에 글씨 있는 상태로 수직선을 긋는방법은 없나요??

이 질문에 댓글 쓰기 :

답변 1

content:'|'; 이렇게 하지마시고, 직접 선을 하나 긋는것으로 하면 자유자재로 원하는 형태가 나옵니다.

예를 들어서,

.top-member-menu li {position:relative;} 를 추가하고,

.top-member-menu li::before {content:''; position:absolute; top:0; left:0; width:1px; height:30px; background:#000;}

이런식으로 가로,세로,포지션 위치를 잡아서 만들어보세요~

답변을 작성하시기 전에 로그인 해주세요.
전체 1,124
QA 내용 검색
filter #html ×

회원로그인

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