<h2>文字をぬりつぶして線を隠す方法だと背景が変わると対応できない❌</h2>
<div class="bg-1">
<div class="line-1"><span>ぬりつぶしキリトリ線</span></div>
</div>
<div class="bg-2">
<div class="line-1"><span>ぬりつぶしキリトリ線</span></div>
</div>
<h2>gridで実装すると背景が変わってもOK⭕</h2>
<div class="bg-1">
<div class="line-2"><span>gridキリトリ線</span></div>
</div>
<div class="bg-2">
<div class="line-2"><span>gridキリトリ線</span></div>
</div>
<h2>一応flexでもできる(けどgridのほうが楽)</h2>
<div class="bg-2">
<div class="line-3"><span>gridキリトリ線</span></div>
// ぬりつぶしで実装してしまうと背景が変わった場合に対応できない
.line-1 {
position: relative;
z-index: 0;
text-align: center;
&::before {
position: absolute;
z-index: -1;
height: 1px;
width: 100%;
content: '';
display: block;
top: 50%;
left: 0;
right: 0;
background-image: linear-gradient(to right, #000 10px, transparent 10px);
background-size: 20px 1px;
}
span {
background-color: #fff;
font-size: 16px;
padding: 0 40px;
}
}
// grid で実装すると背景が変わっても大丈夫✨
// 記述量も少なくなる👍
.line-2 {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 40px;
&::before,
&::after {
height: 1px;
content: '';
display: block;
background-image: linear-gradient(to right, #000 10px, transparent 10px);
background-size: 20px 1px;
}
}
// 一応flexでもできる(けどgridのほうが楽)
.line-3 {
display: flex;
align-items: center;
column-gap: 40px;
&::before,
&::after {
height: 1px;
width: 100%;
content: '';
display: block;
background-image: linear-gradient(to right, #000 10px, transparent 10px);
background-size: 20px 1px;
}
span {
flex-shrink: 0;
}
}
.bg-1 {
padding: 20px 0;
}
.bg-2 {
background-image: linear-gradient(60deg, #ccf, #cfc);
padding: 20px 0;
}
h2 {
margin-top: 40px;
margin-bottom: 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.