引用文（blockqoute)の引用マークを分かりやすく見易くしたいです。

Question

前提・実現したいこと

CSSで引用文（blockquote）の左側に引用文マークを出し引用している所を分かりやすくしたいです。

該当のソースコード

HTML CSS

試したこと

色々検索をかけて見た結果、【コピペOK!】などのサイトしかヒットせず肝心な
説明されていない物が多く分かりません。

Comments

[Lhankor_Mhy]

「肝心な説明」とは、具体的にはどのような説明が必要なのですか？
問題を解決するコードの提示だけでは不足である、ということですよね？

[Toaokajima]

自分の説明不足大変失礼致しました。
おっしゃる通りです。コードの提示だけであまり理解する事が出来ないのでコードを書いても良くなかったりするって事です。

Answer 1

こんにちは。

CSSで引用文（blockquote）の左側に引用文マークを

コードとしては、こうですね。

blockquote::before{
  content: "❝";
}

解説ですが、以下の通りです。

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。

::before (:before) - CSS: カスケーディングスタイルシート | MDN

　

CSS の content プロパティは、要素を生成された値で置き換えます。

content - CSS: カスケーディングスタイルシート | MDN

Comments

[Toaokajima]

御丁寧にありがとうございます‼︎
自分の説明不足から始まったのに本当にありがとうございます!!
早速やってみます????????