CSS 引用マークの作成

※こちらは学習中のメモ書きです。プログラミング勉強中の者が書いています。

引用マーク

CSSで擬似要素を使って引用の装飾を作成する。

こちらのマークを作成する

考え方としては、引用文(blockquote)のサイドのborder＋擬似要素で作った丸を組み合わせる。

擬似要素
content: '"'を使用してquoteマークの「"」を表現。今回は一つの丸で表現するので before だけ使用。
その他position: relative; position: absolute;を用いた。

※position: relative・ position: absoluteについては以下にまとめてある。

relative：基準を現在位置とした指定 absolute：基準を親要素とした指定(絶対的)

https://chiroru-memo.hatenablog.com/entry/2020/02/11/003935

手順
・丸の部分の作成。

.blockquote::before {
  content: '"';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
  background-color: gray;
  font-size: 50px;
  color: white;
}

・あとはblockquoteのサイドにborderをつける。

.blockquote {
  position: relative;
  border-left: 6px solid gray;
  margin: 20px;
}

これで各種のパーツができるので、調節して一体化しているようにすれば完成！