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

Question

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

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

Answer 1

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

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

考虑到你的案例中的额外课程：.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>