Hi there,
This post will explain the creation of sliced texts in CSS as shown below

This is created using two span elements. The idea is to create a span element with 50% height and then expand its text to full height using pseudo-elements. overflow:hidden hides the overflowing part of the text.

The same step is repeated for the bottom part and it is moved a bit to the left, creating a sliced effect.

<div class="text">
    <span class="pseudo">Sliced</span>
    <span data-text="Sliced" class="part"></span>
    <span data-text="Sliced" class="part"></span>
</div>

.text {
    position: relative;
    display: inline-block;
    font-size: 3em;
    padding-right: 5px;
}

.text .pseudo {
    opacity: 0;
}

.text .part {
    width: 100%;
    position: absolute;
    height: 50%;
    overflow: hidden;
    top: 0;
}

.text .part:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    
}

.text .part + .part {
    top: 50%;
}

.text .part + .part:after {
    top: -100%;
    left: 3px;
}

Which produces the below output.

A text-shadow can be added to the span to create a glitch like effect.

.text .part:after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    text-shadow: 2px 2px #ff0000, -2px -2px yellow;
}

Fiddle.