在活动菜单项的左边添加一个点

Question

我使用的是带有垂直导航菜单的WordPress主题。我想在活动菜单项的左边添加一个彩色点，如下图所示。我怎么能这么做？下面是控制活动菜单项的CSS代码。

.vertical_menu_toggle .second .inner ul li.current_page_item a {
}

​

​

Answer 1

考虑到您的示例中的额外类：.vertical_menu_toggle .second .inner，它在这里不起重要作用。

1. 首先，我使用list-style: none删除了默认的要点。
2. 然后，我使用Unicode字符“·”(U+2022:Bullet)作为符号点，但是在不活动列表项的情况下，使用visibility: hidden将其可见性设置为隐藏。

​

.vertical_menu_toggle .second .inner ul {
  list-style: none; /* hide default bullets for all list items*/
  padding: 0;
  margin: 0;
}

/*put red dot before all the active list items*/
.vertical_menu_toggle .second .inner ul li.current_page_item:before {
  content: "• "; /*don't miss the space*/
  color: red;
}

/*put dot but make it invisible before the inactive list items*/
.vertical_menu_toggle .second .inner ul li:not(.current_page_item):before {
  content: "• "; /*don't miss the space*/
  visibility: hidden;
}


/***extra***/
/*not absolutely important*/
h3 {
  font-family: Impact, sans-serif;
  font-size: 36px;
}
li {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
}
.vertical_menu_toggle .second .inner ul li {
  padding-left: 1em;
  text-indent: -.7em;
}

<h3>Art Works</h3>
<div class="vertical_menu_toggle">
  <div class="second">
    <div class="inner">
      <ul>
        <li>2010 to date</li>
        <li class="current_page_item">2000 to 2009</li>
        <li>1990 to 1999</li>
      </ul>
    </div>
  </div>
</div>

​

Answer 2

尝试使用下面的CSS代码。评论中的描述。

​

/* Set the disc and its color */
.vertical_menu_toggle .second .inner ul li.current_page_item {
  color: #D0021B;
  list-style-type: disc;
}
 
/* Remove the default underline */
.vertical_menu_toggle .second .inner ul li a {
  color: #CCC;
  text-decoration: none;
  font-weight: bold;
}

/* Remove the disc on other list elements */
.vertical_menu_toggle .second .inner ul li {
  list-style-type: none;
}

<h3>Art Works</h3>
<div class="vertical_menu_toggle">
  <div class="second">
    <div class="inner">
      <ul>
        <li><a href="">2010 to date</a>
        </li>
        <li class="current_page_item"><a href="">2000 to 2009</a>
        </li>
        <li><a href=" ">1990 to 1999</a>
        </li>
      </ul>
    </div>
  </div>
</div>

​