0
595
Views¿Cómo crear una línea vertical encima del texto cuando está activo?
Quiero que mi elemento activo tenga una línea vertical encima y me dieron una pista para usar :before o :after en CSS para hacer esta línea. Sin embargo, no estoy muy familiarizado con esas dos etiquetas y he intentado un poco usar :after pero parece que no funciona. ¿Pueden darme algunos consejos/sugerencias para esto? A continuación se muestra el ejemplo de diseño de cómo debería verse.
.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>3 answers
Answer question0
Puedes usar algo como esto.
*, *::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>0
Use active:before y use position:relative en el padre donde usó position:absolute . aquí un ejemplo con tu código:
.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>0
¿Parece que estás usando Bootstrap? Si es así, es posible que la mayoría del CSS no funcione. El siguiente ejemplo tiene cargado Bootstrap 5, y su CSS personalizado era demasiado complejo para seguir, así que tuve que eliminarlo (los estilos BS inhibirían la mayor parte de todos modos), y se agregó el siguiente CSS:
.active { position: relative } .active::before { content: '|'; position: absolute; left: calc(50% - 0.25ch); top: -1ch; color: tomato; } Este estilo aparecerá cada vez que se asigne un enlace .active . Si el | es demasiado alto, intente disminuir font-size directamente en el selector .active::before ; use Dev Tools para encontrar el font-size calculado de .active::before para tener una idea de cuánto debe disminuirlo. Además, cambié algunas de las clases de BS de acuerdo con el uso sugerido por BS.
<!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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script></script> </body> </html>