【CSS】擬似要素を用いた２色の下線の引き方

<問題概要>
![

h2の下に擬似要素などを用いて、2色に別れた下線を引きたいと思っています。
（写真中の赤と黒みたいな感じです）

<前提>
・できれば擬似要素で解決したいです。
空タグは用いずに

<試したこと>
・::after{border:1px solid linear-gradient(red 3.8%, black 96.2%);}
これ以外思いつきませんでした。

<現段階のソースコード>

HTML
1<h2 class="p-content1__title">TEXT</h2>

scss
1.p-content1{
2            &__title{
3                color:#949f9f;
4                font-size:80px;
5                font-family:$font-cardo;
6                font-weight: 400;
7                &::after{
8                    content:"";
9                    border:1px solid red;
10                    width:121px;
11                    display:flex;
12                    flex-direction: column;
13                }
14            }

よろしくお願いします。

kei344

2020/04/23 04:35

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答3件

こちらでいかがでしょうか?

SCSS
1.p-content1{
2    &__title{
3        color:#949f9f;
4            font-size:80px;
5            font-family:$font-cardo;
6            font-weight: 400;
7            
8            &::after {
9                content:"";
10                
11                /* border:1px solid red; */
12                border-right: 121px solid blue; /* 追加 */
13                background: red; /* 追加 */
14                
15                height: 1px; /* 追加、装飾の線の高さ */
16                
17                width:121px;
18                /* display:flex; */
19                /* flex-direction: column; */
20                
21                display: block; /* 追加 */
22            }
23        }
24    }
25}

投稿2020/04/23 00:45

編集2020/04/23 02:37

new1ro

総合スコア4528

大喜利としてはこんな感じ?

css
1.underline-gradient{
2	background-image: linear-gradient(to right, #ff0000, #000000);
3	background-repeat: no-repeat;
4	background-size: 100% 2px;
5	background-position: bottom;
6    
7    font-size: 20px;
8}

html
1<span class="underline-gradient">
2 aaaaaaa
3</span>

投稿2020/04/23 03:06

退会済みユーザー

総合スコア0

ベストアンサー

疑似要素を絶対配置で一つの線の上に重ねています。
長さを変えたい場合はそれぞれのwidthを変えてください。

css
1
2.p-content1{
3  &__title{
4    position: relative;
5    width: 500px;
6    padding: 10px;
7    border-bottom: 1px solid black;
8    color:#949f9f;
9    font-size:80px;
10    font-family:$font-cardo;
11    font-weight: 400;
12    &::before{
13      content: "";
14      position: absolute;
15      left: 0;
16      bottom: -1px;
17      width: 100px;
18      border-bottom: 1px solid red;
19    }
20  }
21}