Как можно реализовать появление картинки на фоне пункта меню?
Как на скрине.
При этом пункты меню могут быть разной ширины , нужно чтобы картинка растягивалась до нужной ширины (зависит от длины текста).
Мой html код:
Мой css код:
.menu { padding:0; margin:0; display:block; }
.menu li { font-family: 'Mensch-Regular'; float:left; display:block; width:100%; text-align:center; font-size:24px; margin-top:32px; }
.menu a { margin:20px; color:#4d4d4d; text-decoration:none; }
Ответ
Вроде не сложно , в два псевдоэлемента
* {
margin: ;
padding: ;
list-style: none;
text-decoration: none;
}
html,
body {
font-family: "Times New Roman", sans-serif;
font-size: 1.3em;
}
ul {
display: flex;
}
li {
margin-left: 10px;
position: relative;
z-index: 100;
}
li:hover:after {
content: "";
display: inline-block;
width: 100%;
height: 50%;
position: absolute;
top: 5px;
left: -10px;
z-index: -1;
border-top: 20px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
}
li:hover:before {
content: "";
display: inline-block;
width: 100%;
height: 50%;
position: absolute;
top: 10px;
left: -10px;
z-index: -1;
border-bottom: 20px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
}
https://codepen.io/topicstarter/pen/geabdb?editors=1100 с изменением цвета ссылки
Комментариев нет:
Отправить комментарий