Как можно реализовать появление картинки на фоне пункта меню?
Как на скрине.
При этом пункты меню могут быть разной ширины , нужно чтобы картинка растягивалась до нужной ширины (зависит от длины текста).
Мой 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 с изменением цвета ссылки
Комментариев нет:
Отправить комментарий