Shuto's Front-End

css.2 ::befere & ::after

::before や ::after は擬似要素(Pseudo-elements)と呼ばれるもので、HTMLに直接書くことなく、選択された要素の後・前にスタイル付けすることができます。

作ったもの

ポイント

重要な何か。

<p class="ex1">重要な何か。</p>

<style>
p.ex1::before {
  content: "point";
  background: #f00;
  color: white;
  margin-right: 2px;
  padding: 1px;
  font-weight: bold;
}
</style>

チェック事項

チェック事項的な何か。

<p class="ex2">チェック事項的な何か。</p>

<style>
p.ex2::before {
  font-family: FontAwesome;
  content: "\f00c";
  margin-right: 3px;
}
</style>

フローチャート

手順１
手順２
手順３

<ul class="ex3">
  <li>手順１</li>
  <li>手順２</li>
  <li>手順３</li>
</ul>

<style>
.ex3 {
  text-align: center;
  list-style: none; /*黒ぽちを消す*/
}
.ex3 li::after{
  content: '↓';
  display: block; /*改行*/
  padding: 0.3em; /*余白*/
}
</style>

ただし、これだと最後の矢印が余計になってしまいます。

そこで、XXX:not(YYY) という、「XXXに適用するが、YYYは除く」意味を持つ否定擬似クラスを用いることで、この問題に対処します。（擬似クラスは擬似要素とは違い、コロンは1つです。）

なお、並んでいる要素のうち最後のものを指すには :last-child という擬似クラスを用います。

フローチャート（改良版）

風邪ひきーの
医者行きーの
受付済ませーの
待ちーの
名前呼ばれーの
トツギーノ

<ul class="ex4">
  <li>風邪ひきーの</li>
  <li>医者行きーの</li>
  <li>受付済ませーの</li>
  <li>待ちーの</li>
  <li>名前呼ばれーの</li>
  <li style="font-family: Impact,Charcoal; font-size: 2em;">トツギーノ</li>
</ul>

<style>
.ex4 {
  text-align: center;
  list-style: none;
}
.ex4 li:not(:last-child)::after{
  content: '↓';
  display: block;
  padding: 0.3em;
}
</style>

吹き出し

ピン芸人になったバカリズム（マセキ芸能社所属）の代表作。厳格な表情でフリップをめくり、そこに描かれた絵に適した解説を「○○ーの」と厳格な口調で発するネタ。でも、オチは必ず「トツギーノ」（「嫁ぎーの」という意）
引用：はてなキーワード

<div class="ex5">
  <div class="ex5__img"><img src="https://rr.img.naver.jp/mig?src=http%3A%2F%2Fblog.kitamura.jp%2F03%2F4664%2Fimages%2Fm464dc8h5363e5i3_060405totugino.gif&twidth=1200&theight=1200&qlt=80&res_format=jpg&op=r"></div>
  <div class="ex5__callout">ピン芸人になったバカリズム（マセキ芸能社所属）の代表作。厳格な表情でフリップをめくり、そこに描かれた絵に適した解説を「○○ーの」と厳格な口調で発するネタ。でも、オチは必ず「トツギーノ」（「嫁ぎーの」という意）<br>引用：<a href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%C4%A5%AE%A1%BC%A5%CE">はてなキーワード</a></div>
</div>

<style>
.ex5 {
  display: table;
  width: 100%;
}
.ex5__img {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding-right: 10px;
}
/* ここから */
.ex5__img::before {
  content: 'トツギーノ';
  text-align: center;
  display: block;
  font-family: Impact,Charcoal;
}
.ex5__img::after {
  content: '出典：https://matome.naver.jp/odai/2142518805695473601';
  text-align: center;
  display: block;
  font-size: 0.5em;
}
/* ここまでは余計 */
.ex5__callout {
  border: #0082af solid 4px;
  position: relative;
  background: #fff;
  padding: 12px;
  border-radius: 13px;
}
.ex5__callout::before {
  content: "";
  position: absolute;
  border-right: 23px solid #0082af;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  left: -23px;
}
.ex5__callout::after {
  content: "";
  position: absolute;
  border-right: 24px solid #fff;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  left: -17px;
}
</style>

Shuto's Front-End

Other articles

css.1 蛍光ペンを引く

Other articles

other contents

social