代码之家  ›  专栏  ›  技术社区  ›  Malte K

CSS前后括号内容不起作用

hover navigation css html
  •  -1
  • Malte K  · 技术社区  · 12 月前

    我只希望在桌面/电脑屏幕上的导航链接周围有括号,而不是在手机上。在我的代码中,右括号(导航链接:hover::after)正在工作。但左括号(导航链接:hover::before)将靠近链接。

    请在完整模式下观看我的剪辑!!

    这是我的代码: 

    window.onload = function() {

  /* Burger menu toggle nav */
  const topNav      = document.getElementById("myTopnav");
  const burgerMenu  = document.getElementById("burgerMenu");
  
  burgerMenu.addEventListener("click", () => { 
    topNav.classList.toggle("responsive");
    burgerMenu.classList.toggle("toggleMenu");
  });

};
    /***********************************************
  TEMPLATE CONTAINER
***********************************************/
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 1fr 1fr 1fr;
  grid-template-areas:
    "nav"
    "header"
    "main"
    "footer";
}

nav {
  grid-area: nav;
  background-color:blue;
}

header {
  grid-area: header;
  background-color: darkcyan;
}

main {
  grid-area: main;
  background-color: chocolate;
}

footer {
  grid-area: footer;
  background-color: cornflowerblue;
}



/***********************************************
  Navbar
***********************************************/

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  background-color: #2c2c2c;
  z-index: 1;
}

#burgerMenu {
  float: right;
  padding: 28px 15px 15px 15px;
}

.dot-arrow {
  padding-right: 10px;
}

.topnav a {
  display: none;
  color: white;
  text-decoration: none;
  font-size: 20px;
}

.topnav.responsive .icon {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}

.topnav.responsive a {
  display: block;
  float: none;
  padding: 16px 0px;
}

.responsive {
  margin-top: 28px;
  padding: 0 0 10px 20px;
  background-color: #161616;
}

.toggleMenu {
  content:url("/images/svg/menu-close.svg");
  width: 32px;
  height: 32px;
}

.nav-item {
  display: inline;
  padding: 0 10px 10px 10px;
  font-size: 1.5rem;
  color: white;
  text-transform: uppercase;
  text-shadow: 10px 0px 20px $primary,
               10px 0px 20px $primary;
}

.nav-link {
  text-decoration: none;
}

.dot-arrow {
  padding-right: 10px;
}

.navbar-brand {
  font-family: "Smooch Sans", serif;
  color: white;
  text-decoration: none;
  font-size: 2.2rem;
  text-shadow: 10px 0px 20px $primary,
               10px 0px 20px $primary;
}

.logo-brand-wrapper {
  display: inline;
}

.brand-logo {
  padding: 25px 5px 0px 15px;;
  text-shadow: 1px 1px 2px black,
               0 0 25px $primary,
               10px 0px 20px #004f7c;
}

.brand-name {
  color: $primary;
}

.nav-link:link {
  color: white;
  text-decoration: none;
}

.nav-link:visited {
  color: white;
}

.nav-link:hover {
  color: white
}

.nav-link:active {
  color: white;
}

.nav-link:hover::before {
  content: "[";
  display: none;
  color: $primary;
}

.nav-link:hover::after {
  content: "]";
  display: none;
  color: $primary;
}


/*  X-Small devices (portrait phones, less than 576px)
      No media query for `xs` since this is the default in Bootstrap
  */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .nav-item {
    font-size: 0.8rem;
  }

  .topnav.responsive a {
    padding: 5px 0px;
  }


}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .topnav.responsive a {
    padding: 5px 0px;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /* TEMPLATE CONTAINER */
  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "nav nav nav"
      "main main main"
      "footer footer footer";
  }

  /* NAVBAR */
  .topnav {
    float: right;
    padding: 20px;
    
  }

  .topnav a {
    display: inline;
    font-size: 1.3rem;
  }

  #burgerMenu {
    display: none;
  }

  .brand-logo {
    padding: 13px 5px 0px 15px;
    width: 30px;
    height: 30px;
  }

  .navbar-brand {
    font-size: 2.3rem;
  }

  .dot-arrow {
    display: none;
  }

  .nav-link:hover::before {
    display: inline;
    position: absolute;
    
  }
  
  .nav-link:hover::after {
    display: inline;
    position: absolute;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}
    <nav>
  <!-- Logo and Brand -->
  <div class="logo-brand-wrapper">
    <a href="#">Home</a>

  <!-- Burger Menu -->
    <a href="#" id="burgerMenu" class="icon">
      <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"/>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
        <g id="SVGRepo_iconCarrier"> <path d="M20 7L4 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 12L4 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 17L4 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
      </svg>
    </a>
  </div>

  <!-- Top Navigation Menu -->
  <ul class="topnav" id="myTopnav">
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">Logos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">Sketeches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">Phots</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">Tut</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ .URL }}">Contact</a>
      </li>
  </ul>
</nav>

    希望有人能帮助我,谢谢。

    1 回复  |  直到 12 月前
        1
  •  0
  •   Tatsuyiaki    12 月前

    这个问题来自你的立场:绝对;在您的::之前和::之后。添加位置:相对;使用.nav项(父项)并左右调整,可以正确放置括号。

    我还添加了括号作为内容值。

    以下是经过修改的代码片段: 

    /***********************************************
  Navbar
***********************************************/

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  background-color: #2c2c2c;
  z-index: 1;
}

#burgerMenu {
  float: right;
  padding: 28px 15px 15px 15px;
}

.dot-arrow {
  padding-right: 10px;
}

.topnav a {
  display: none;
  color: white;
  text-decoration: none;
  font-size: 20px;
}

.topnav.responsive .icon {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}

.topnav.responsive a {
  display: block;
  float: none;
  padding: 16px 0px;
}

.responsive {
  margin-top: 28px;
  padding: 0 0 10px 20px;
  background-color: #161616;
}

.toggleMenu {
  content: url("/images/svg/menu-close.svg");
  width: 32px;
  height: 32px;
}

.nav-item {
  display: inline;
  padding: 0 10px 10px 10px;
  font-size: 1.5rem;
  color: white;
  text-transform: uppercase;
  text-shadow: 10px 0px 20px $primary,
    10px 0px 20px $primary;
}

.nav-link {
  text-decoration: none;
}

.dot-arrow {
  padding-right: 10px;
}

.navbar-brand {
  font-family: "Smooch Sans", serif;
  color: white;
  text-decoration: none;
  font-size: 2.2rem;
  text-shadow: 10px 0px 20px $primary,
    10px 0px 20px $primary;
}

.logo-brand-wrapper {
  display: inline;
}

.brand-logo {
  padding: 25px 5px 0px 15px;
  ;
  text-shadow: 1px 1px 2px black,
    0 0 25px $primary,
    10px 0px 20px #004f7c;
}

.brand-name {
  color: $primary;
}

.nav-link:link {
  color: white;
  text-decoration: none;
}

.nav-link:visited {
  color: white;
}

.nav-link:hover {
  color: white
}

.nav-link:active {
  color: white;
}

.nav-link:hover::before {
  content: "[";
  display: none;
  color: $primary;
}

.nav-link:hover::after {
  content: "]";
  display: none;
  color: $primary;
}


/*  X-Small devices (portrait phones, less than 576px)
      No media query for xs since this is the default in Bootstrap
  */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .nav-item {
    font-size: 0.8rem;
  }

  .topnav.responsive a {
    padding: 5px 0px;
  }


}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .topnav.responsive a {
    padding: 5px 0px;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /* TEMPLATE CONTAINER */
  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "nav nav nav"
      "main main main"
      "footer footer footer";
  }

  /* NAVBAR */
  .topnav {
    float: right;
    padding: 20px;

  }

  .topnav a {
    display: inline;
    font-size: 1.3rem;
  }

  #burgerMenu {
    display: none;
  }

  .brand-logo {
    padding: 13px 5px 0px 15px;
    width: 30px;
    height: 30px;
  }

  .navbar-brand {
    font-size: 2.3rem;
  }

  .dot-arrow {
    display: none;
  }

  .nav-item {
    position: relative;
  }

  .nav-link:hover::before {
    content: "[";
    display: inline;
    color: #primary;
    position: absolute;
    left: -2px;
    /* Adjust for left position */
  }

  .nav-link:hover::after {
    content: "]";
    display: inline;
    color: #primary;
    position: absolute;
    right: 2px;
    /* Adjust for right position */
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}
    <nav>
  <!-- Logo and Brand -->
  <div class="logo-brand-wrapper">
    <a href="#">Home</a>

    <!-- Burger Menu -->
    <a href="#" id="burgerMenu" class="icon">
      <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"/>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
        <g id="SVGRepo_iconCarrier"> <path d="M20 7L4 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 12L4 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 17L4 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
      </svg>
    </a>
  </div>

  <!-- Top Navigation Menu -->
  <ul class="topnav" id="myTopnav">
    <li class="nav-item">
      <a class="nav-link" href="{{ .URL }}">Logos</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{{ .URL }}">Sketeches</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{{ .URL }}">Phots</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{{ .URL }}">Tut</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{{ .URL }}">Contact</a>
    </li>
  </ul>
</nav>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    11 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    11 月前
    magenta placenta  ·  将css变量合并为一个变量
    11 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    11 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    11 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    11 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    11 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    11 月前
    Luckkks  ·  过渡色工作不正常
    11 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    11 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号