疑似要素を使った作図

html
1<div class="why">
2</div>

css
1.why {
2  position: relative;
3  padding: 40px 0;
4  text-align: center;
5  background-color: #ebb94d;
6  color: #fff;
7}
8
9* {
10  box-sizing: border-box;
11}
12
13div {
14  display: block;
15
16.why:after {
17    content: " ";
18    height: 0;
19    position: absolute;
20    width: 0;
21    border: 25px solid transparent;
22    border-top-color: #ebb94d;
23    top: 100%;
24    left: 50%;
25    margin-left: -25px;
26}
27
28:after {
29    box-sizing: border-box;

ここに出てくるcssのプロパティーはすべて理解しているつもりです。結果のようになる過程が分かりません。教えてください。

出典：https://isara.life/

maisumakun

2019/02/26 01:06

記載のHTML+CSSでは、（:afterの後の中括弧を補ったとしても）背景色のついたdivしか見えないのですが、それが意図した「結果」なのでしょうか。 https://codepen.io/anon/pen/JzjOQd

yambejp

2019/02/26 01:08

命題が途中できれてるし、「結果」は何を示しているのかもわかりません

yoorwm

2019/02/26 01:10

どれが「結果」か書いていないですし、CSSの内容が正しく無い（閉じていない）ので、ここに書かれている内容から何を目的としているのかわかりません。

azuapricot

2019/02/26 01:10

結果のようになっていないと思うんですが。疑似要素ちゃんとつくれてますか？今のままだとただのDIVです

m.ts10806

2019/02/26 01:11

maisumakunさん divも閉じかっこないですね。。質問者さんすべて理解していて「過程がわからない」とは矛盾していますね。せめて構文ミスのないコードを提示してください。

m.ts10806

2019/02/26 01:12

そういえばdivってそもそもブロック要素だからdisplay: block;の指定ってほぼ意味ないですね。意図が良く分からないコードなのでそもそも過程が分からないとか言っている次元ではないと思います。

Lhankor_Mhy

2019/02/26 01:26

ここ最近、何人かのユーザーからその isara ってサイトに関連するCSSの質問が出ていますね。来年度新卒のインターンの研修とかなのかしら？

dit.

2019/02/26 01:40

https://isara.life/を元に模写コーディングしている、3角形の描画部分（疑似要素で3角形を描画できる仕組み）がわからない　といった質問内容にしてほしいです。出典サイトの該当部分を見ましたがデベロッパーツール出てくるCSSをほぼそのまま貼り付けてるんですかね。変なところに割り込んでたりuser agent stylesheetでの記載までわざわざ書いてますが…。なぜ3角形が描画できるのか　については図説付きで書いてる記事があったので紹介しておきます。紹介だけなので回答ではなくこちらで。 https://liginc.co.jp/web/html-css/html/164641