<div class="heading-11__container">
<h3 class="heading-11"><span class="heading-11__jp"><span class="heading-11__jp-text">見出しが入ります</span><span class="heading-11__jp-underline"><span></span></span></span><span class="heading-11__en">HEADING TEXT</span></h3>
</div>
.heading-11__container
h3.heading-11
span.heading-11__jp
span.heading-11__jp-text 見出しが入ります
span.heading-11__jp-underline
span
span.heading-11__en HEADING TEXT
{
"link": "#",
"text": "見出し11"
}
$BLOCK_NAME: '.heading-11';
// 変数
#{ $BLOCK_NAME } {
&__container {
padding-right: 2px;
position: relative;
&::after {
content: '';
right: 0;
bottom: 16px;
width: 8px;
height: 8px;
display: block;
background: #000;
position: absolute;
transform: translateY(50%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
}
display: flex;
align-items: center;
position: relative;
overflow: hidden;
&__jp {
font-size: 40px;
position: relative;
padding: 20px 20px 20px 0;
}
&__jp-underline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
&::before,
&::after {
position: absolute;
content: '';
display: block;
height: 1px;
background: #000;
}
&::before {
left: 0;
bottom: 0;
width: calc(100% - 8px);
}
&::after {
left: calc(100% + (8px - 1px));
bottom: 16px;
width: 100vw;
}
> span {
position: absolute;
bottom: 0;
right: 8px;
display: block;
height: 16px;
width: 1px;
background: #000;
transform: skewX(-45deg);
transform-origin: bottom right;
}
}
}