見出しのデザイン変更

こんにちは

ご希望のデザインの元のCSSは下記のとおりです。

h2 {
position: relative;
padding-left: 30px;
font-size:20px;
color: #000;
}

h2::before,
h2::after{
content: "□";
position: absolute;
}

h2::before{
left:0;
top:-3px;
}

h2::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}

これの、下記の部分にfont-sizeを加えてpxを変えたら大きくしたり小さくしたりできるかと思います。

h2::before,
h2::after{
content: "□";
position: absolute;
    font-size:20px;　←これを追記して数値を変更
}

また、二つの位置を右にずらしたいというのは、
ご質問者様が作成した見出し文の右側に設置したいという認識でよろしいでしょうか。
その場合は、下記のコードの部分のleftをrightに変えたらOKです。

h2::before{
left:0;
top:-3px;
}

h2::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}

ただ、この場合、h2に幅を指定していないので、
文章のすぐ右ではなく、画面の右端に表示されます。
その為、h2に幅（width)を指定する必要があります。
一応イメージでコード作ってみましたので、下記をコピーで右側表示のサイズも少し大きくしたものが作れます。

h2 {
position: relative;
padding-left: 30px;
font-size:20px;
color: #000;
width: 270px;
}

h2::before,
h2::after{
content: "□";
position: absolute;
    font-size:30px;
}

h2::before{
right:0;
top:-3px;
}

h2::after{
right: 5px;
top: 3px;
color: #A1B8D1;
}

• この返信は3年前にproalcuestoが編集しました。

□の記号のfont-sizeを変えたので、
下にさがったのではなく、文字のフォントサイズと□の記号のフォントサイズが異なる為に、生じた差です。
これを解消するには、文字のfont-sizeの数値を変えたりすることで、一番良い具合のところを探ってください。

または、下記コードのtopの数値を変更することで解消できるのですが、
ここを編集していくのであれば、positionの仕組みの理解をされたら、
より多くの位置移動が可能になります。

h2::before {
    right: 0;
    top: -3px;
}

h2::after {
    right: 5px;
    top: 3px;
    color: #A1B8D1;
}