文字の背景の中央に太い線の装飾を入れる実装をしたいです！

◎質問内容

こちらの画像のように、文字の背景の中央に太い線の装飾を入れたいです。

text-decoration: line-through;

で実装できるかなと思いましたが、取り消し線なので出来ませんでした。

他に実装方法を調べてみましたが、下線の実装ばかりでした。

こちらの画像のように、文字の背景の中央に太い線の装飾を入れる実装方法を教えて頂けると幸いです。

よろしくお願いします。

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

回答2件

ベストアンサー

こんばんは。

背景にグラデーションを入れる方法をお試しになってはいかがですか？

サンプル

css
1p {
2	background-image: linear-gradient( transparent 33%, pink 33%, pink 66%, transparent 66% );
3}

投稿2020/11/20 08:48

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2020/11/20 08:57

解決しました！ご丁寧にありがとうございます！

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

疑似要素を使って実装してみました。

html
1<div class="box">
2<span class="line-under-text">PROFILE</span>
3</div>

css
1.box {
2 background-color: lightgray; 
3 position: relative;
4 z-index: 0;
5 width: 400px;
6 text-align: center;
7}
8.line-under-text {
9  font-size: 40px;
10  font-weight: bolder;
11  position: relative;
12  padding: 30px;
13}
14
15.line-under-text::before {
16  content: "";
17  display: block;
18  background-color: lightsalmon;
19  position: absolute;
20  width: 100%;
21  height: 0.3em;
22  top: 50%;
23  left: 50%;
24  transform: translate(-50%, -50%);
25  z-index: -1;
26}