h2 {
position: relative;
background: #ffeeff;
color: #1a1a1a;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: ”;
position: absolute;
border-top: 10px solid #1a1a1a;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: ”;
position: absolute;
border-top: 10px solid #1a1a1a;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
↓
h2{
background: #ffeeff;
box-shadow: 0px 0px 0px 5px#ffeeff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}
「before」と「after」の基本的な使い方というのは、ただ単に、指定した場所の前後に好きな文字を挿入することです。
| background プロパティ | 色、画像、原点と寸法、反復方法、その他の機能など、背景に関するすべてのスタイルオプションを一括で設定する方法です。 |
| positionプロパティ | ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。 |
| colorプロパティ | 文字色を指定する際に使用します。 |
| font-size | 文字の大きさ |
| line-height | 行の高さを指定する際に使用します。 |
| margin-bottom | 下マージンを指定する際に使用します。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なる。 |
| padding-top | 要素のパディング領域における上部の高さを設定します。 |
| padding-right | 要素のパディング領域における右部の高さを設定します。 |
| padding-bottom | 要素のパディング領域における下部の高さを設定します。 |
| padding-left | 要素のパディング領域における左部の高さを設定します。 |
