CSSの疑似要素内でのテキスト編集方法

前提・実現したいこと

CSSの疑似要素内でのテキストの配置場所を変えたり、編集をしたいのですが、どのように<p>タグを呼び出せばよいのでしょうか。

現状と理想

一枚目の画像が今の状態で、二枚目が目標としているデザインとなります。

該当のソースコード

HTML
1<body>
2    <div class="wrapper">
3        <p>あ、</p>
4        <p>あいう</p> 
5        <p>あいうえ</p>
6        <p>あいうえおかき</p>
7    </div>
8</body>

CSS
1body {
2    background-color:#FAE268;
3}
4
5.wrapper {
6    font-family: ta-f1blockline,sans-serif;
7    font-weight: 400;
8    font-style: italic;
9    position: relative;
10    overflow: hidden;
11    width: 100%;
12    height: 877px;
13}
14
15.wrapper::before{
16    content: '';
17    position: absolute;
18    top: 150px;
19    left: -30px;
20    width: 120%;
21    height: 300px;
22    background: #0639A6;
23    transform-origin: left center;
24    transform: rotate(-10deg);
25    z-index: -1;
26
27    /*背景画像*/
28    background-image:url(title-blue.png);
29    background-size: 100% auto; 
30    background-position: center;
31}
32
33.wrapper::after{
34    content: '';
35    position: absolute;
36    top:454px;
37    left: -30px;
38    width: 120%;
39    height: 300px; 
40    background: #CC191E;
41    transform-origin: left center;
42    transform: rotate(-10deg);
43    padding: 0px 0px 0px 0px;
44    z-index: -2;
45       /*背景画像*/
46    background-image:url(title-red.png);
47    background-size: 100% auto; 
48    background-position: center;
49}

行動規範の内容に同意します

回答2件

下記でどうでしょう。

css
1body {
2  background-color:#FAE268;
3}
4.wrapper {
5  overflow: hidden;
6  width: 100%;
7  height: 877px;
8  padding-top: 150px;
9}
10.wrapper > p {
11  font-family: ta-f1blockline,sans-serif;
12  font-weight: 400;
13  font-size: 140px;
14  margin: 0;
15  line-height: 1;
16  height: 150px;
17  transform-origin: left center;
18  transform: skewy(-10deg);
19  margin-top: -1px;
20}
21
22.wrapper > p:nth-child(-n+2) {
23  background: #0639A6;
24}
25.wrapper > p:nth-child(n+3){
26  background: #CC191E;
27}