Good, is there any way to make a border TOP with margin?
When I do a focus or a hover, I put a top but a bit higher than the focus / hover element.
Good, is there any way to make a border TOP with margin?
When I do a focus or a hover, I put a top but a bit higher than the focus / hover element.
If you are looking to make a menu with HTML5 , you could do it like this:
body {
background-color: #666;
}
nav ul{
list-style: none;
margin: 0 10px 0 10px;
padding: 0;
}
nav ul li{
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
text-align: center;
border-top: 5px solid transparent;
}
nav ul li a {
display: block;
color: #fff;
border: 1px solid #fff;
padding: 5px;
margin-top: 5px;
text-decoration: none;
}
nav ul li:hover {
border-top: 5px solid #fff;
}<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.header {
width: 100%;
height: 100px;
background-color: black;
padding: 32px;
}
.wrapper {
padding-top: 16px;
border-top: 2px solid transparent;
width: 150px;
}
.wrapper:hover{
border-top: 2px solid white;
}
.boton {
padding: 8px;
color: white;
border: 1px solid white;
}
<div class='header'>
<div class='botones'>
<div class='wrapper'>
<div class='boton'>
Texto
</div>
</div>
</div>
</div> Use a padding and a border-top transparent that change color during :hover . This way, when you pass the cursor you will not see a jump down when drawing the edge.
As you see in your image, you will need to enclose each item in a div parent that is used for this.
Try using a wrapper for your element and on this wrapper define a new style that completes your design requirements.
.magic-border {
padding-top: 20px;
border-top: solid 2px black
}
.my-element {
border: solid 1px black;
}<div class='magic-border'>
<div class='my-element'>algo<div>
</div>