테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

hover 대해 채택완료

MIKIJO 4년 전 조회 1,995
답변 3
목록

css 궁금한점이 있습니다.

 

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

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

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

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

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
세크티
세크티
4년 전

</p>

<pre>
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;
}</pre>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
MIKIJO
4년 전
감사합니다~

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

에
에그당
4년 전

</p>

<p>p {border-botto: 1px solid #000;padding-bottom:1px;}</p>

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

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
MIKIJO
4년 전
감사합니다~

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

핑크빈
핑크빈
4년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

M
MIKIJO
4년 전
감사합니다~

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

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

로그인