Блог

Главная - Вопросы по программированию - Как я могу сделать подчеркнутый текст просто точкой?

Как я могу сделать подчеркнутый текст просто точкой?

#javascript #html #css #reactjs #typescript

Вопрос:

Я пытаюсь сделать этот компонент: введите описание изображения здесь

Теперь это компонент :

введите описание изображения здесь До сих пор мне удавалось сделать так, чтобы с помощью activeClassName текст был окрашен в синий цвет, когда я нахожусь по нужной ссылке. Но я также хочу, чтобы под текстом была точка каждый раз, когда я останавливаюсь на этой ссылке … Я точно не знаю, как это сделать . Ниже я оставлю код, чтобы вы поняли, что я делал до сих пор и что я предполагаю сделать, чтобы это сработало..

 import { FC } from "react";
import { NavLink } from "react-router-dom";

// import observer from "mobx-react-lite"

import "./Navigation.css";

export const Navigation: FC = () => {
  return (
    <div className="nav">
      <div className="logo">
        <svg className="logo-image"></svg>
      </div>
      <div className="Center-links">
        <ul className="pages">
          <NavLink exact to="/" activeClassName="ceva" className="text">
            <li className="row">Home</li>
          </NavLink>
          <NavLink to="/Bim" activeClassName="ceva" className="text">
            <li className="row">Bim 2021</li>
          </NavLink>
          <NavLink to="/Regulations" activeClassName="ceva" className="text">
            <li className="row">Regulations</li>
          </NavLink>
          <NavLink to="/History" activeClassName="ceva" className="text">
            <li className="row">History</li>
          </NavLink>
        </ul>
      </div>
      <div className="Buttons-Right">
        <h1>Button1</h1>
        <h1>Button2</h1>
      </div>
    </div>
  );
};

export default Navigation; 
 .logo-image {
  mask: url("../assets/Images/logo.svg");
  background-color: black;
  width: 100px;
  height: 65px;
  margin: auto;
}

.nav {
  height: 10vh;
  width: 100%;
  background: #6e68a7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.logo {
  height: 100%;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Center-links {
  height: 100%;
  width: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.pages {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 50%;
}

.Buttons-Right {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.ceva {
  color: #33c9d3;
}

.text {
  text-decoration: none;
}

.row {
  list-style: none;
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

Ответ №1:

Вы можете сделать что-то вроде этого:

 li.row.active{
  position:relative;
}
li.row.active::before{
  content: ' ';
  z-index: 999;
  position: absolute;
  bottom: 0;
  right:50%;
  width:4px;
  height:4px;
  background-color: red;
  border-radius: 999px;
}

ul {
    list-style: none;
}
li {
  display: inline;
  padding:5px;
} 
 <ul>
<li class="row active">
test 1
<li>
<li class="row">
test 2
<li>
<ul>

Комментарии:

1. Это не работает, может быть, вы можете взглянуть на мой код и попытаться что-то там изменить ?

2. @viorelGrigoras теперь вы можете видеть, что это работает

Метки: