文字が少しだけ下線にかかるようにしたい

前提

CSSで下線を引き、少しだけ下線の上に文字がかぶるようにしたい。

実現したいこと

少しだけ文字の下に線が入るようにしたいです。

該当のソースコード

html
1<div id="header_subtitle2"><a><span>■■</span>○○○○○</a>○○</div>
2

CSS
1#header_subtitle2 a {
2  border-bottom: solid 6px #B391A2;
3  line-height: 1;
4  display: inline-block;
5  text-decoration: none;
6}

試したこと

近づけることはできたのですが文字がかぶりません。
■■は別にフォントを変えたくてspanタグをつけています。

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

回答1件

ベストアンサー

疑似要素に border-bottom を設定して、ネガティブマージンで重ねるようにすればどうでしょう。

css
1#header_subtitle2 a {
2  line-height: 1;
3  display: inline-block;
4  text-decoration: none;
5}
6#header_subtitle2 a:after {
7  content: "";
8  display: block;
9  border-bottom: solid 6px #B391A2;
10  margin-top: -6px;
11}

別案

background に linear-gradient で背景色を設定する

css
1#header_subtitle2 a {
2  line-height: 1.2;
3  display: inline-block;
4  text-decoration: none;
5  background: linear-gradient(transparent 60%,#B391A2 60%);
6}