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;}
이런식으로 가로,세로,포지션 위치를 잡아서 만들어보세요~
답변감사합니다
