菜单的圆形边框

Question

我正在设计侧边栏菜单：Here is My Design 我需要像这样：Here is simple

这是我的二手代码：

CSS

.categories li.active a {
    color: #AC1735;
    border-left: 3px solid #AC1735;
    font-weight:bolder
}
.categories li a {
    padding-left:20px !important;
    padding-right:20px !important;
}
/*CATEGORIES*/
.categories {
    padding:0 !important;
}
.categories li {
    float:left;
    display:block;
    width:100%;
    font-size:15px;
    font-weight:600;
    padding:0 !important;
}
.categories li:last-child {
    border-bottom:none;
}
.categories li a {
    float:left;
    display:block;
    width:100%;
    color:#AC1735;
    position:relative;
    padding:15px 50px 15px 20px;
    font-weight:bolder;
    font-family:"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
.categories li a:hover {
    color: #D52347;
    border-left: 3px solid #AC1735;
    font-weight:bolder
}
.categories li.active a {
    color: #AC1735;
    border-left: 3px solid #AC1735;
    font-weight:bolder
}
.categories.right a {
    padding-right:20px;
}
.categories.right a:before {
    left:20px;
    right:auto;
    background-position:-161px 0;
}

HTML

<ul class="categories right">
    <li class="active"><a href="#">All recipes</a></li>
    <li><a href="#">Tips and Tricks</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Inspiration</a></li>
    <li><a href="#">Category name</a></li>
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit amet</a></li>
 </ul>

Answer 1

尝试伪元素:after或:before DEMO

.categories li a:hover{color: #D52347;
  position: relative;
  border-left: 3px solid #AC1735; font-weight:bolder}
.categories li a:hover:before{
  content: "";
  position: absolute;
  top:20px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #AC1735;
}

Answer 2

<强> live demo

ul.categories{
  border-left: 2px solid #8592BD;
  list-style:none;
  padding:10px;
}
ul.categories a{
  position:relative;
  display:block;
  padding: 5px;
  color:#000;
}
ul.categories li.active a:before,
ul.categories li:hover  a:before{
  position:absolute;
  top:8px;
  left:-16px;
  content: " ";
  width:10px; height:10px;
  border-radius:50%;
  background: #38c;
}