文字の上から蛍光マーカーのようにを引く見出しです。
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title{
position: relative;
display: flex;
align-items: flex-end;/*被せるラインの位置下付（上下中央ならばcenter）*/
}
.cp_h1title:before{
position: absolute;
content: '';
height: 15px;/*ラインの太さ*/
width: 100%;/*ラインの長さ*/
background-color: rgba(144, 202, 249,0.5);/*ラインの色*/
transform: skew(20deg, 0deg);/*ラインの傾斜角度*/
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info