How to impose right border?

Question

How to impose right border?

Hello!

I now teach layout, gain experience, and I have here that there had been a moment, a decision which I have not yet found playing with many guesses.

I have a menu. (the code probably looks scary)

<header>
 <div class="content-logo"><span>Matthew Greenberg</span></div>
 <nav class="content-nav">
the <ul>
 the <li><a href="#">Home</a></li>
 the <li><a href="#">Some stuff</a></li>
 the <li><a href="#">Query lib</a></li>
 the <li><a href="#">Embeds</a></li>
 the <li><a href="#">Inspiration</a></li>
 the <li><a href="#">contact</a></li>
 the <li><a href="#">about</a></li>
 </ul> 
</nav>
 </header>

header {
 height: 70px;
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
 overflow: hidden;
}

.content-nav {
 position: relative;
 z-index: 1;
}

.content-nav ul {
 padding: 0;
margin:0;
color:white;
 position: relative;
 z-index: 10;
 overflow: visible;
}

.content-nav ul li {
 display: inline-block;
 color: white;
 line-height: 70px;
 position: relative;
}

.content-nav ul li:hover {
 border-bottom:2px solid black;
 opacity: 1;
}
.content-nav ul li a {
 position: absolute;
 display: block;
 padding-left: 5px;
 text-decoration: none;
 color: #303030;
 font-family: "Lato";
 /*height: 100%;*/
 opacity: .5;
}

.content-nav ul li a:hover {
 border-bottom:2px solid black;
 opacity: 1;
}

I need to hover on the menu item appeared border-bottom exactly on the line\border have headers, but it turns out if I set line-height to the height of the block, it turns out that the line is hidden.

Maybe I'm not exactly able to convey their thoughts, then you need something similar or is the same as here on this site: https://medium.com/ .

I would be very grateful for all the help in my endeavor and any tips and correction about my "code" is not only on this issue but in General.

and I've been playing around with positioning in the horizontal direction. How it is more practical to implement?

Thank you all!!!

lily_Schaefer28 asked September 19th 19 at 12:06

Related questions

More answers about "How to impose right border?"

3 answers

Bettie answered on · Accepted Answer · 2019-09-19T12:08:02.903Z

Bettie answered on September 19th 19 at 12:08

Solution

You can use pseudo element ::before:

.content-nav a {
 position: relative;
}
.content-nav a:before {
 content: ";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 2px;
 background: #000;
}

Thanks for the response!

I've added this code that way, but it still shows that the line is above the box-shadow headers a.

.content-nav a {
position: relative;
}
.content-nav li a:hover:before {
content: ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #000;
} - lily_Schaefer28 commented on September 19th 19 at 12:11

- lily_Schaefer28 commented on September 19th 19 at 12:14

Correct position, for example, bottom: -2px; or top: 100%;. And header to remove overflow: hidden; - Bettie commented on September 19th 19 at 12:17

Tyson.Kessler48 answered on · Accepted Answer · 2019-09-19T12:10:02.903Z

Probably somewhere here:

<header>
 <nav class="content-nav">
the <ul>
 the <li><a href="#home">Home</a></li>
 the <li><a href="#somestuff">Some stuff</a></li>
 the <li><a href="#querylib">Query lib</a></li>
 the <li><a href="#Embeds">Embeds</a></li>
 the <li><a href="#Inspiration">Inspiration</a></li>
 the <li><a href="#contact">contact</a></li>
 the <li><a href="#about">about</a></li>
 </ul> 
</nav>
 </header>

header {
height: 50px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 40px;
}

.content-nav ul {
 padding: 0;
}

.content-nav ul li {
float: left;
list-style-type: none;
}

.content-nav ul li a {
display: block;
text-decoration: none;
margin: 0 10px;
text-transform: uppercase;
color: #303030;
font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
font-size: 0.7 em;
letter-spacing: 1px;
line-height: 442%;
opacity: .5;
}

.content-nav ul li a:hover {
 border-bottom:2px solid black;
 opacity: 1;
}

.content-nav ul li a:active {
 font-weight: bold;
 letter-spacing: 0.5 px;
 border-bottom:2px solid black;
 opacity: 1;
}

If you change the font, you will have to choose the line-height and letter-spacing.

and I've been playing around with positioning in the horizontal direction. How it is more practical to implement?

I don't know. Depends on the task.

Dashawn answered on · Accepted Answer · 2019-09-19T12:12:02.903Z

I'm in a similar situation to refer to set display: block and travrel height on the outer container, set transparent border-bottom, and when the mouse asked him the color.
Positioning decided padding'ohms.