SIR
이전 목록 다음
채택완료

hover 대해

MIKIJO
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 2,040

css 궁금한점이 있습니다.

 

p {border-botto: 1px solid #000;}

p:hover {border-bottom: 2px solid #000;}

으로 했을 경우, 2px일때 border아래  내용들은 살짝 움직이는데 이걸 방지하고 싶어요

어떻게 해야 안움직이고 2px border가 될까요?

그누보드5
|

답변 3개 / 댓글 3개

채택된 답변
+20 포인트
위위버
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

Copy 
p {
    border-bottom: 1px solid #000;
    position:relative
}

p:hover:after {    
    content: '';
    left:0;
    bottom: -1px;
    width: 100%;
    height: 4px;
    border-bottom: 2px solid #000;
    position: absolute;
}

답변에 대한 댓글 1개

MIKIJO
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~
에에그당
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

Copy 
p {border-botto: 1px solid #000;padding-bottom:1px;}

p:hover {border-bottom: 2px solid #000;padding-bottom:0;}

답변에 대한 댓글 1개

MIKIJO
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~
핑크빈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

  box-shadow: 0 0 0 3px #000 inset;  

답변에 대한 댓글 1개

MIKIJO
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~

답변을 작성하려면 로그인이 필요합니다.