CSS3 circle around another circle with space

Question

I need to create somthing, as you see in the picture. I already created a line with circles, but I have problems with yellow, which should have a circle border around the space.

I already created a violin with the steps that I already have, but yellow is my problem. Any suggestions are welcome! jsfiddle

My HTML:

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

My CSS:

.preview ul li {
    list-style-type: none;
    position: relative;
    width: 1px;
    margin: 0 auto;
    padding-top: 35px;
    background: #fff;
}

.preview ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: inherit;
}

.preview ul li.last {
    padding-top: 0;
}

.preview ul li.current:after {
    background: #fff934;
    border: 2px solid #fff934;
    box-shadow: 1px 1px 0px 5px black;
}

Answer 1

You need to add another circle with a transparent background with a yellow border for the current class.

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #456990;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.preview ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  padding-top: 35px;
  background: #fff;
}   

.preview ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: inherit;
}

.preview ul li.last {
  padding-top: 0;
}

.preview ul li.current:after { /* Code i edited */
  background: #fff934;
}
.preview ul li.current:before {  /* Code i added*/
  content: '';
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    width: 22px;
    height: 21px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff934;
}

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

Run codeHide result

Answer 2

div li. background background-clip: content-box - , , background , , background padding border , . padding a border. background, border , padding.

ul {
  list-style: none;
  background: url(https://i.stack.imgur.com/SVlc8.jpg);
}

li {
  margin: .25em;
  border: solid 2px transparent;
  padding: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor content-box;
  color: #fff;
}

.current { border-color: currentColor; }

<ul>
  <li></li>
  <li class='current'></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Hide result

( background-clip, )

Answer 3

- border-style: double

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #456990;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.preview ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  padding-top: 35px;
  background: #fff;
}   

.preview ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: inherit;
}

.preview ul li.last {
  padding-top: 0;
}
/* edits made to this */
.preview ul li.current:after {
  background: #fff934;
  border: 5px double #456990;
  top: -4px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>
</body>
</html>

Hide result

Answer 4

You can use box-shadowfor the outer circle and linear-gradientfor the vertical line. therefore, very few lines of code to achieve the layout.

ul {
  list-style: none;
  padding: 15px 30px;
  background: teal linear-gradient(to bottom, silver, silver) 36px 0 / 1px auto repeat-y;
}
li {
  background: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 20px 0;
}
.current {
  background: gold;
  box-shadow: 0 0 0 4px teal, 0 0 0 5px gold;
}

<ul>
  <li></li>
  <li class="current"></li>
  <li></li>
  <li></li>
</ul>

Run codeHide result