Bem limitado, mas ainda sim, apenas com CSS, basta usar dois títulos e posicionar um um pouco mais pra um lado, é importante que um deles fique em cima com uma altura menor e fundo branco
h2[cortado], h2[cortado]::before {
padding-left: 5px;
font-family: sans-serif;
font-weight: 100;
font-size: 3rem;
letter-spacing: .25em;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
}
h2[cortado] {
z-index: 2;
}
h2[cortado]::before {
content: attr(cortado);
transform: translateX(3.5px);
height: 30px;
background-color: white;
overflow: hidden;
z-index: 2;
}
<h2 cortado="cortado">cortado</h2>
Apenas com o atributo sem ter que repetir no HTML usando ::after
e ::before
, também pode usar a borda e a margem interna pra dar um efeito de distância entre a parte de baixo e de cima
h2[cortado]::after, h2[cortado]::before {
padding-left: 3.5px;
font-family: sans-serif;
font-weight: 100;
font-size: 3rem;
letter-spacing: .25em;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
content: attr(cortado);
}
h2[cortado]::after {
z-index: 1;
}
h2[cortado]::before {
transform: translateX(3.5px);
height: 25px;
background-color: white;
overflow: hidden;
z-index: 2;
border-bottom: 3px solid white;
padding-bottom: 3px;
}
<h2 cortado="exemplo"></h2>