Masahiro's tech note
PostsProjectsAbout
PostsProjectsAbout
Backback arrow icon
CSS

Circled number with pure CSS

.circle{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: skyblue;
  text-align:center;
  line-height: 80px;
}

参考記事

CSSで円を描く方法:文字を中央配置するには?枠線のつけ方は?

Featured
margin 0 auto とmargin-topを共存させる方法
2022/02/11
CSS
CSSでbackground imageをいい感じに設置する方法
2022/02/10
CSS
border-bottomを文字数にCSSのみで合わせる方法
2020/08/31
CSS

github
twitter
menta
mail
copyright © 2016-2023 Masahiro Okubo