KCP API결제 버전 배포 - exec() 불가 환경 대응KCP exec() 불가 대응 버전 배포
이전 목록 다음
채택완료

hover 대해

MIKIJO
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-06-30 (수) 15:20:51 2,168

css 궁금한점이 있습니다.

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

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

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

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

그누보드5
|

답변 3개 / 댓글 3개

채택된 답변
+20 포인트
위버
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-06-30 (수) 15:28:34
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
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-01 (목) 09:15:11
감사합니다~
에에그당
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-06-30 (수) 20:15:08
Copy 
p {border-botto: 1px solid #000;padding-bottom:1px;}

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

답변에 대한 댓글 1개

MIKIJO
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-01 (목) 09:15:28
감사합니다~
핑크빈
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-06-30 (수) 15:31:50

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

답변에 대한 댓글 1개

MIKIJO
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-01 (목) 09:15:18
감사합니다~

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