:before로 적용된 배경이 100%로 채워지지 않습니다 ㅜㅜ

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

작성

242

인스타그램 로고 부분에 그라데이션 효과를 주고 싶어서 배경(.sns a:nth-child부분)에 컬러를 주고 :before부분(.sns a:nth-child:before)에 화이트를 주어서 작업해보았는데요.

작동은 잘되는데 hover하기전 before부분의 height가 100%일때 사진처럼 상하좌우에 배경색이 조금씩 표시가 됩니다 ㅜㅜ

before부분의 width랑 height를 100%이상으로 더 늘려봐도 똑같네요.. 어떻게 해야 깔끔하게 올화이트로 보이게 할수 있을까요??

jquery HTML/CSS

답변 3

코딩웍스(Coding Works)

지식공유자

a태그 보더 안쪽에 색상이 보이는건 아래 코드로 잘못 처리해서 그렇습니다.

.sns a:nth-child(1) {

background-color: #3b5999;

}

이렇게 되어야 합니다. 기본적으로 a태그의 배경은 흰색으로 지정되어 있고 마우스가 올라갔을 때 a의 before의 색상을 보여주는건데 위의 코드로 되어 있으면 처음부터 a의 배경색이 나와 있으면 안되요. 그래서 미세하게 보이는거에요.

완성본 다운로드해서 보시면 이것말고 코드가 잘 안된 부분이 있으니 영상을 다시 보시면서 만들어보세요.

.sns a:nth-child(1):before {

background-color: #3b5999;

}

mc773

질문자

이렇게 적용했습니다~

/* Google Web Font */

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {

font-family: 'Raleway', sans-serif;

line-height: 1.5em;

margin: 0;

font-weight: 300;

color: #222;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

flex-direction: column;

}

a {

text-decoration: none;

color: #222;

}

.sns {

background-color: #eee;

padding: 40px;

border-radius: 10px;

box-shadow: 0 0 20px rgba(0,0,0, 0.13);

margin-top: 25px;

}

.sns a {

border: 5px solid white;

display: inline-block;

width: 80px;

height: 80px;

border-radius: 50%;

position: relative;

background-color: #fff;

margin: 10px;

overflow: hidden;

}

.sns a:before {

content :"";

position: absolute;

width : 100%;

height: 100%;

background-color: white;

transition : 0.5s;

}

.sns a:hover:before {

height: 0px;

}

.sns a:nth-child(1) {

background-color: #3b5999;

}

.sns a:nth-child(2) {

background-color: #55acee;

}

.sns a:nth-child(3) {

background-color: #dd4b39;

}

.sns a:nth-child(4) {

background-color: #0077b5;

}

.sns a:nth-child(5) {

background: linear-gradient(#744999,#e22484,#e8442f,#f0c441);

}

.sns a .fa {

position: relative;

top : 50%;

left : 50%;

transform: translate(-50%,-50%);

font-size: 33px;

color: black;

transition : 0.5s;

}

.sns a:hover .fa {

color: white;

}

</style>

</head>

<body>

</div>

</body>

코딩웍스(Coding Works)

지식공유자

before를 너비 높이 100% 하셨으면 그림처럼 상하좌우에 조금 삐져나오는 일이 없을텐데요.

html css 코드를 답글로 올려주세요.

인프런 커뮤니티 질문&답변

:before로 적용된 배경이 100%로 채워지지 않습니다 ㅜㅜ