quotes「引用符」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_quotes1 q { quotes :  "『" "』" "［" "］";}
.css_quotes1 q::before { content : open-quote;}
.css_quotes1 q::after { content : close-quote;}

.css_quotes2 span { quotes :  "（" "）";}
.css_quotes2 span::before { content : open-quote;}
.css_quotes2 span::after { content : close-quote;}

.css_quotes3 q { quotes :  none;}
.css_quotes3 q::before { content : open-quote;}
.css_quotes3 q::after { content : close-quote;}

<!-- html -->
<div class="common">
  <div class="cssTitle"><q>に引用符を表示（階層あり）</div>
  <div class="css_quotes1">
  <q><q>quotes</q>は、<q>content</q>で挿入する引用符を指定します。</q>
  </div>

  <div class="cssTitle"><span>に引用符を表示（階層なし）</div>
  <div class="css_quotes2">
  <span>quotes</span>は、<q>以外の要素にも指定可能です。
  </div>

  <div class="cssTitle"><q>の引用符を非表示<br>（quotes : none;）</div>
  <div class="css_quotes3">
  <q>content</q>で引用符挿入を指定しても、<q>quotes:none;</q>で引用符は表示されません。
  </div>
</div>