【コピペOK】cssの擬似要素afterとbeforeの使い方

2019-06-10
Writing by Naoto

webkoreはフリーランスのweb制作チームで運営しています。お仕事のご依頼は、web制作やシステム開発のご相談その他のご相談からお気軽にご相談ください。

プログラミングを教えていた頃、生徒さんに『擬似要素って使い所ありますか?』と聞かれることがたまにありました。

 

勉強を始めたてだと確かに使い所がイメージ出来ないかと思います。しかし擬似要素、特にafterbeforeは結構使います。

 

この記事では擬似要素についてと、その使い所について具体的にdemoを用いて説明していきます。

TOPICS

擬似要素とは

擬似要素を使うとcssから要素を追加することが出来ます。

例えば下のような見出しがあったとしましょう。これを少しデザイン的にアレンジしてみます。

 

<h2>擬似要素の使い方について</h2>

 

h2{
  font-size: 20px;
  font-weight: bold;
}

h2::before{
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #000;
  margin-right: 10px;
}

 

htmlは変えずにcssから文章の前に四角を入れてみました。

 

ディベロッパーツールでコードを見てみるとh2の前にbeforeが追加されています。

 

beforeで入れた場合は要素の後に追加されます。このようにhtmlにコードを書くことなく、cssから要素を擬似的に追加できます。

なぜ擬似要素を使うのか

上で紹介した例はhtmlに書いて作ることも出来ます。

 

<h2><span></span>擬似要素の使い方について</h2>

 

h2{
  font-size: 20px;
  font-weight: bold;
}
 
h2 span{
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #000;
  margin-right: 10px;
}

 

こんな感じです。

 

ただこれをやりすぎるとhtmlがごちゃごちゃしてしまい汚くなりますし、何箇所も何か決まった要素を追加する場合、効率も悪くなってしまいます。(後にdemoで解説します)

 

基本的にhtmlは意味付けで見た目はcssで整えるのがルールですので、デザイン的な要素など意味のない要素はcss側から入れてあげるのがベストです。

 

また、検索エンジンはcssに書いてあることは無視するので、正しく検索エンジンにサイトを評価してもらえることにもなります。

擬似要素afterbeforeの使用例

では実際に実務でよく使う使用例について説明します。

応用して使ってみてください。

 

よくある質問のQA

このようなデザインを見たことありませんか?

もちろんhtml側でも入れることはできますが、擬似要素のbeforeを使ってあげるとよりスマートに入れることができます。 またQAが何個あっても擬似要素を使いcss側で入れているのでいちいちhtml側に書かなくてもOKです。

 

<div class="demo" id="demo2">   
  <ul>     
    <li>       
      <p class="question"><span>ここに質問が入ります。</span></p>       
      <p class="answer"><span>ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。</span></p>     
    </li>     
    <li>       
      <p class="question"><span>ここに質問が入ります。</span></p>       
      <p class="answer"><span>ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。</span></p>     
    </li> 
    <li>       
      <p class="question"><span>ここに質問が入ります。</span></p>       
      <p class="answer"><span>ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。ここに質問の回答が入ります。</span></p>     
    </li> 
  </ul>
</div>

 

#demo2 li{
   margin-bottom: 30px; 
} 
#demo2 li:last-child{ 
  margin-bottom: 0; 
} 
#demo2 li p{ 
  display: flex; 
} 
#demo2 li p span{ 
  display: block; 
  width: calc(100% - 40px); 
} 
#demo2 li .question{ 
  margin-bottom: 10px; 
  font-weight: bold; 
} 
#demo2 li .question::before{ 
  content: 'Q'; 
  display: block; 
  width: 30px; 
  height: 30px; 
  line-height: 30px; 
  margin-right: 10px; 
  text-align: center; 
  font-weight: bold; 
  border-radius: 50%; 
  color: #fff; 
  background-color: #2196f3; 
} 
#demo2 li .answer::before{ 
  content: 'A'; 
  display: block; 
  width: 30px; 
  height: 30px; 
  line-height: 30px; 
  margin-right: 10px; 
  text-align: center; 
  font-weight: bold; 
  border-radius: 50%; 
  color: #fff; 
  background-color: #ef1616; 
}

リストの前にアイコン画像を入れる

このようにリストの前にアイコン画像を入れてあげることもできます。

 

<div class="demo" id="demo3">   
  <ul>     
    <li>リストが入ります。</li>     
    <li>リストが入ります。</li>     
    <li>リストが入ります。</li>     
    <li>リストが入ります。</li>     
    <li>リストが入ります。</li>   
  </ul>
</div>

 

#demo3 li{
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
#demo3 li:last-child{
  margin-bottom: 0;
}
#demo3 li::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  background-image: url(../img/check.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

 

content: url(../img/check.png);とすることも出来るのですが、これだと画像のサイズが変更できませんので上記のやり方を推奨します。

ボタンに使う矢印

ボタンなどに使う矢印も擬似要素で作ることが出来ます。

 

1つ目のdemo

<div class="demo" id="demo4"><a href="#">詳しくみる</a></div>

 

#demo4 a{
  display: block;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  background-color: #000;
  position: relative;
}
#demo4 a::after{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 22px;
  right: 20px;
}

 

2つ目のdemo

<div class="demo" id="demo5"><a href="#">詳しくみる</a></div>

 

#demo5 a {
  display: block;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  background-color: #000;
  position: relative;
}
#demo5 a:before {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 35px;
  height: 1px;
  background: #fff;
}
#demo5 a:after {
  position: absolute;
  bottom: 18px;
  right: 20px;
  content: "";
  vertical-align: middle;
  width: 10px;
  height: 6px;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
}

引用文

これまたよく見るデザインですよね。

 

<div class="demo" id="demo6">
  <blockquote>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。</blockquote>
</div>

 

#demo6 blockquote{
  background-color:#f6f6f6;
  border: 1px solid #eee;
  padding: 20px 30px;
  line-height: 2;
  position:relative;
}
#demo6 blockquote:before{
  content:"“";
  font-size: 70px;
  line-height:1;
  font-family:"MS Pゴシック",sans-serif; color:#999;
  position:absolute;
  left:0;
  top:0;
}

吹き出し

吹き出しも擬似要素で作ることができます。 最近はブログやメディアなどで『アイコン+吹き出し』で会話をしているようなデザインも流行っていますね。

 

<div class="demo" id="demo7">
  <p>吹き出しの中の文章が入ります。吹き出しの中の文章が入ります。吹き出しの中の文章が入ります。吹き出しの中の文章が入ります。吹き出しの中の文章が入ります。吹き出しの中の文章が入ります。</p>
</div>

 

#demo7 p{
  position: relative;
  padding: 20px 30px;
  background-color:#c1e7f9;
}
#demo7 p:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #c1e7f9;
}

英語タイトル

最後に頻繁には使いませんがこんなことも出来ます。

ABOUT USは擬似要素で入れています。

 

これは色々な考え方があるのですが、普通何かを調べたくて検索する際に日本人だったら日本語で検索しますよね?

引っ越しの費用を知りたいときに『引っ越し price』と調べる人はあまりいません。

 

見出しに余計な英語は含めなくても良いという考えで、ABOUT USは擬似要素で入れる人もいます。僕もこのようなデザインであれば、擬似要素で入れます。

 

<div class="demo" id="demo8">
  <h2>私たちについて</h2>
  <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

 

#demo8 h2{
  font-size: 30px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
}
#demo8 h2::after{
  content: 'ABOUT US';
  font-family: 'Kaushan Script', cursive;
  display: block;
  font-size: 70px;
  line-height: 1;
  color: #eee;
  font-weight: bold;
}
#demo8 p{
  line-height: 2;
  margin-top: 20px;
}

まとめ

今回demoを交えていくつか紹介してみました。 これを応用して使うべきところで使ってみてください。 使い所のポイントはこの2点です。

  • htmlがごちゃごちゃになりそうな所
  • 意味のないデザイン的な要素

 

demoの情報です。

中級者向けのコーディング練習教材作りました!

初心者を半歩くらい脱した方向けにコーディング練習教材作りました。

 

 

ただコードの解説をするだけではなく、コードを書く際の考え方、実際に仕事をする上で気をつける点、SEO的なことなどを入れています。

こんな事を考えながら書くのか!と、これまで知らなかった事を知れる『気づき』があれば幸いです。

この記事を書いた人

Naoto

理系院卒→フリーランス(4年目)。インターネットと読書が好き。就職経験なし、野蛮な生き方してきました。サーバーサイド以外は何でもやります。