margin-left と text-indent を設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【CSS】2行目以降の行頭を揃える(ぶら下げインデント)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>おすすめの漫画</h1>
<p>
作品名：すべての人類を破壊する。<br>
それらは再生できない。
</p>
<p>
作者名：[原作]伊瀬勝良<br>
[漫画]横田卓馬<br>
[監修・協力] ウィザーズ・オブ・ザ・コースト
</p>
</body>
</html>
style.css
@charset "utf-8";
p {
margin-left: 4em;
text-indent: -4em;
}
今回の場合、左側に4文字分の余白を作り、最初の行だけ4文字分左側にずらすことによって2行目以降の行頭は4文字分右側にずれた状態で揃う。
