Código de Texto con Efecto de Contorno Moderno

Efecto de Texto con Contorno en HTML y CSS

En este proyecto, vamos a crear un diseño de texto moderno y elegante utilizando HTML y CSS. El efecto de contorno en el texto se activa al pasar el cursor sobre él, creando una interacción visual atractiva. Este tipo de diseño es ideal para encabezados y títulos, mejorando la estética de cualquier sitio web con una presentación más dinámica y elegante.

Código HTML 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Enlazamos los estilos CSS -->
    <link rel="stylesheet" href="styles.css">
    <title>Efecto de Contorno - Texto</title>
</head>
<body>
    <section class="contenedor-texto">
        <h1 class="titulo">
            Bienvenidos
        </h1>
    </section>
</body>
</html>
Código CSS 
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contenedor-texto {
    width: 100%;
    height: 100vh;
    background-color: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulo {
    font-size: 50px;
    color: #336699;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.titulo::before,
.titulo::after {
    content: "";
    position: absolute;
    height: 4px;
    background-color: #336699;
    width: 0;
    transition: .3s ease-in-out;
}

.titulo::before {
    left: 0;
    bottom: -2px; /* Línea en la parte inferior */
}

.titulo::after {
    right: 0;
    top: -2px; /* Línea en la parte superior */
}

.titulo:hover::before,
.titulo:hover::after {
    width: 100%;
}