斜め線の入った見出し

パターン1:両側に同じ向きの斜め線

1.柴犬の好きな遊び

HTML

<h1>1.柴犬の好きな遊び</h1>

CSS

h1{
            padding-left:1em;
            font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	}

h1::before, h1::after{
            position:relative;
            display:inline-block;
            content:"";
            background:#333;
            width: 1px;
            height: 2em;
            transform: rotate(40deg);
            top:0.5em;
            left:-0.5em;
	}

h1::after{
            left:1em;
	}

パターン2:両側に開くように斜め線

1.柴犬の好きな遊び

基本的にパターン1の左側を逆にすればいいだけです
あとはmarginやpositionでバランスを取ります

HTML

<h1>1.柴犬の好きな遊び</h1>

CSS

h1{
            padding-left:1em;
            font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	}

h1::before{
            position:relative;
            display:inline-block;
            content:"";
            background:#333;
            width: 1px;
            height: 2em;
            transform: rotate(-40deg);
            top:0.6em;
            left:-0.8em;
	}

h1::after{
            position:relative;
            display:inline-block;
            content:"";
            background:#333;
            width: 1px;
            height: 2em;
            transform: rotate(40deg);
            top:0.6em;
            left:1em;
	}

パターン3:アクセント風の斜め線

アクセント的な感じの斜め線です
この位置じゃなくてもいいですが
こんな感じでどこにでも入れられるということで

1.柴犬の好きな遊び

HTML

<h1>1.柴犬の好きな遊び</h1>

CSS

	h1{
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
		padding: 0.5em 0.5em 0.5em 1.5em;
		border: 1px solid #333;
		position:relative;
	}

	h1::before{
		display:inline-block;
                content:"";
                position:absolute;
		top:-1em;
		left: 1.2em;
		width: 1px;
		height: 2.5em;
		background:#333;
		transform: rotate(45deg);
	}

コメント