80% Circle Border

Question

Right now I have a Circle which serves as a wrapper for my icons. However, I was wondering if it was possible to not show the "full" circle but rather 80% of it. The provide picture shows the desired result.

My Wrapper Class:

.icon-wrapper {
position: relative;
border: 2px solid black;
padding: $icon-padding;
border-radius: 50%;
}

Answer 1

You use either :after or :before Pseudo-element.

span {
  display: block;
  height: 100px;
  width: 100px;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  background: white;
  height: 20px;
  width: 50px;
  top: -5px;
  left: 8px;
}

<span></span>

---

In order to achieve the reqired result, adjust the width, height, top, and left properties of the :after element.

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements