css pseudo element wont show

-1

Я создаю меню навигации (после учебника), и для создания значка nav я, видимо, должен использовать псевдоэлементы. Обычно это было бы хорошо, но на этот раз они вообще не будут отображаться ...css pseudo element wont show

Что-то не так с моим кодом/есть ли лучший способ сделать значок?

*, 
*::before, 
*::after { 
    box-sizing: inherit; 
    padding: 0; 
    margin: 0; 
} 
body { 
    padding: 0; 
    margin: 0; 
    background-color: #FFF 
    -webkit-font-smoothing: antialiased; 
} 
a { 
    color: hsla(37, 39%, 72%, 1.00); 
    text-decoration: none; 
} 
li{ 
    list-style: none; 
} 
.header { 
    width: 100vw; 
    height: 100vh; 
    display: block; 
    background:url(img/background.jpg) no-repeat center center; 
    background-size: cover; 
    position: relative; 
} 
.logo { 
    font-size: 4em; 
    color: #FFF; 
    line-height: 1.1; 
    border: 1px solid #fff; 
    border-radius: 100%; 
    width: 80px; 
    height: 80px; 
    display: inline-block; 
    padding: 5px; 
    background-color: hsla(152, 40%, 20%, 1.00); 
    margin: 50px 0 0 50px; 
    cursor: pointer; 
} 
.nav-icon { 
    width: 50px; 
    height: 40px; 
    display: block; 
    background-color: transparent; 
    position: absolute; 
    top: 70px; 
    right: 50px; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
     user-select: none; 
} 
.nav-icon .icon { 
    width: 50px; 
    height: 2px; 
    display: block; 
    background-color: #333; 
    position: absolute; 
    top: 20px; 
} 

.nav-icon .icon::before 
.nav-icon .icon::after { 
    content: ""; 
    width: 50px; 
    height: 2px; 
    display: block; 
    background-color: #FFF 
    position: absolute; 
    height: 100%; 
} 

.nav-icon .icon::before { 
    top: -10px; 
} 
.nav-icon .icon::after { 
    top: 10px; 
}

источник

2016-10-20 malik aasen

Я не вижу никакой ошибки здесь. Таким образом, будет лучше, если вы также можете добавить свою разметку HTML и создать демо-версию или фрагмент, показывающий вашу проблему. –

Добро пожаловать в Stack Overflow! Голосование за закрытием, поскольку этот вопрос был вызван проблемой, которая больше не может быть воспроизведена или простой типографской ошибкой. Хотя подобные вопросы могут быть по-теме здесь, этот вопрос был разрешен таким образом, который вряд ли поможет будущим читателям. –

Вы пропустили точку с запятой ; в некоторых линиях и запятая , в

.nav-icon .icon::before , 
.nav-icon .icon::after { 
    content: ""; 
    width: 50px; 
    height: 2px; 
    display: block; 
    background-color: #FFF 
    position: absolute; 
    height: 100%; 
}

, который фиксирует, что у искали

источник

2016-10-20 13:49:39 Manjunath

css pseudo element wont show

ответ

Смежные вопросы