<div class="text">
        <div class="string">Mehmet&nbsp;Eren&nbsp;Toper</div>
    </div>

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: black;
}

.text {
    position: relative;
}

.text::before {
    position: absolute;
    content: '';
    width: 20px;
    bottom: 0px;
    right: 0px;
    height: 2px;
    background: white;
    animation: animLine 0.5s steps(4) infinite;
}

@keyframes animLine {
    0%,
    75% {
        opacity: 1;
    }
    76%,
    100% {
        opacity: 0;
    }
}

.text .string {
    font: 55px Arial, sans-serif;
    position: relative;
    color: white;
    animation: animText 10s steps(17) infinite;
    overflow: hidden;
}

@keyframes animText {
    0%,
    90%,
    100% {
        width: 0px;
    }
    30%,
    60% {
        width: 500px;
    }
}