英字と線を組み合わせた見出し – 英字と下線

HTML

<h2 class="heading" data-en="Recruit">採用情報について</h2>

CSS

.heading {
  position: relative;
  padding-bottom: 30px;
  font-size: 26px;
  text-align: center;
  background-image: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 35%, #e5c046 35%, #e5c046 65%, rgba(0 0 0 / 0) 65%, rgba(0 0 0 / 0) 100%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.heading::before {
  content: attr(data-en);
  display: block;
  margin-bottom: 10px;
  color: #e5c046;
  font-size: 20px;
  font-style: italic;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}