見出しの下線デザインで、CSSを使って短い下線を表示させる方法がわからない

下記の画像のように短い黄色い下線を表示させる方法がわかりません。

調べて↓のリンクを参考にしてみたのですが、表示されませんでした。
下線部の表示方法

ご教授お願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>responsive-site</title>
10  </head>
11  <body>
12    <div class="l-wrapper">
13      <div class="c-hero">
14        <header class="l-header">
15          <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
16          <nav>
17            <ul class="p-nav__menu">
18              <li class="p-nav__list">
19                <a href="" class="p-nav__button">home</a>
20              </li>
21              <li class="p-nav__list">
22                <a href="" class="p-nav__button">about</a>
23              </li>
24              <li class="p-nav__list">
25                <a href="" class="p-nav__button">access</a>
26              </li>
27              <li class="p-nav__list">
28                <a href="" class="p-nav__button">contact</a>
29              </li>
30            </ul>
31          </nav>
32        </header>
33        <h1 class="c-hero__title">Responsive Site</h1>
34      </div>
35      <main class="l-main">
36        <section class="p-contents">
37          <div class="p-contents__about">
38            <h2 class="p-contents__title">ABOUT</h2>
39            <p class="p-contents__description">
40              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit
41              est facilis maiores, perspiciatis
42            </p>
43          </div>
44          <div class="p-contents__photo">
45            <ul class="p-gallery">
46              <li class="p-gallery__photo"></li>
47              <li class="p-gallery__photo"></li>
48              <li class="p-gallery__photo"></li>
49              <li class="p-gallery__photo"></li>
50            </ul>
51          </div>
52        </section>
53    </div>
54  </body>
55</html>

CSS
1@charset "UTF-8";
2
3.l-header {
4  display: flex;
5  justify-content: space-between;
6  align-items: center;
7}
8
9.l-header__logo {
10  width: 90px;
11  height: 90px;
12  padding: 10px;
13}
14
15.p-nav__menu {
16  display: flex;
17}
18
19.p-nav__list {
20  margin-right: 40px;
21}
22
23.p-nav__button {
24  font-size: 150%;
25  text-decoration: none;
26}
27
28.c-hero {
29  position: relative;
30  height: 100vh;
31  background-image: url(../images/hero.jpg);
32  background-size: cover;
33}
34
35.c-hero__title {
36  position: absolute;
37  margin:0;
38  padding:0;
39  top: 50%;
40  left: 50%;
41  -ms-transform: translate(-50%,-50%);
42  -webkit-transform: translate(-50%,-50%);
43  transform: translate(-50%,-50%);
44  font-size: 80px;
45  color: #fff;
46}
47
48.l-main {
49  margin-top: 150px;
50}
51
52.p-contents__title {
53  display: flex;
54  justify-content: center;
55  margin-bottom: 80px;
56  color: #333333;
57  font-size: 350%;
58}
59
60.p-contents__description {
61  display: flex;
62  justify-content: center;
63  padding-bottom: 15px;
64  color: #808080;
65  font-size: 180%;
66}
67
68@media screen and (max-width: 768px) {
69  /* SP style */
70}
71@media screen and (min-width: 769px) {
72  /* PC style */
73}

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

回答1件

ベストアンサー

参考サイトはCSSの擬似要素で追加していますね。
以下のコードを参考にしてみてください。

css
1.p-contents__title {
2  ...
3  position: relative; // この行を追加
4}
5
6.p-contents__title::before { // まま追加
7  content:'';
8  position: absolute;
9  bottom: -10px;
10  left: 50%;
11  width: 30px;
12  height: 2px;
13  transform: translate(-50%);
14  background-color: #666666;
15}