'How to create a vertical line on top of the text when it is active?
I want my active element to have a vertical line on top of it and I was given a hint to use either :before or :after in CSS to make this line. However, I'm not really familiar with those two tags and I have tried a bit using :after but it doesn't seem to work. Can you give me some advice/suggestions for this? Below is the design example of what it should look like.
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
}
.nav-menu .nav-list .nav-item .active ::after {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
top: 0;
} <nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>Solution 1:[1]
It looks like you're using Bootstrap? If so, the majority of the CSS may not work. The example below has Bootstrap 5 loaded, and your custom CSS was too complex to follow so I had to remove it (BS styles would inhibit most of it anyway), and the following CSS was added:
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
This style will appear whenever a link is assigned .active. If the | is too tall, try decreasing font-size directly on the .active::before selector -- use Dev Tools to find the computed font-size of .active::before to get an idea of how much you should decrease it by. Also, I changed some of the BS classes according to BS suggested use.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.active {
position: relative
}
.active::before {
content: '|';
position: absolute;
left: calc(50% - 0.25ch);
top: -1ch;
color: tomato;
}
</style>
</head>
<body>
<main class="container">
<section class="row">
<nav class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>Solution 2:[2]
You can use something like this.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
.box{
width: 10rem;
height: 5rem;
border: 1px solid black;
}
.box::before{
display: block;
position: relative;
left: 50%;
transform: translate(-50%);
content: '';
height: 1.5rem;
width: 2px;
background-color: brown;
}<body>
<div class="box"></div>
</body>Solution 3:[3]
Use active:before and use position:relative on the parent where you used position:absolute. here an example with your code:
.nav-menu{
background: var(--unnamed-color-ffffff);
flex: 1;
justify-content: space-between;
padding-top: 2.3rem;
width: 91.5rem;
}
.nav-menu .icon{
width: 2.0rem;
height: 2.0rem;
margin-right: 1.5rem;
}
.nav-menu .nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu .nav-list .nav-item{
display: inline-block;
}
.nav-menu .nav-list .nav-item .nav-link {
display: inline-block;
text-decoration: none;
color: black;
}
.nav-menu .nav-list .nav-item .active {
color: red;
position: relative;
}
.nav-menu .nav-list .nav-item .active::before {
content: '';
border-left: 0.1rem solid red;
height: 1.5rem;
position: absolute;
left: 50%;
bottom: 100%;
}<nav class="nav-menu d-flex" id="nav-menu">
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link active">one</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">two</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">three</a>
</li>
<li class="nav-item">
<a href="#promotion" class="nav-link">four</a>
</li>
<li class="nav-item">
<a href="#customer" class="nav-link">five</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">six</a>
</li>
</ul>
</nav>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | zer00ne |
| Solution 2 | UPinar |
| Solution 3 |