Cómo creo una linea al lado de un enlace que no ocupe todo el ancho, con la propiedad ::after

Puedes crear una línea al lado de un enlace utilizando la pseudo-clase ::after en CSS. Aquí te muestro un ejemplo:

a { position: relative;
display: inline-block;
padding-right: 10px;
}

a::after { content: “”;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 20px;
background-color: black;
}

En este ejemplo, hemos agregado una línea después del contenido del enlace utilizando la pseudo-clase ::after. Hemos establecido una position: relative en el enlace y una position: absolute en la línea, para que la línea esté situada en relación al enlace y no ocupe todo el ancho. Además, hemos utilizado la propiedad top: 50% y transform: translateY(-50%) para centrar la línea verticalmente en relación al enlace.

Crear botón flotante que permanezca en todas las secciones de WordPress

Aquí te muestro un ejemplo de código HTML y CSS de un botón creado en el footer para que aparezca arriba.

<!– HTML –>
<div class="floating-button">
<a href="#">My Button</a>
</div>
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}

.floating-button a { display: block;
width: 50px;
height: 50px;
background-color: #ff0000;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 25px;
text-decoration: none;
}

En este ejemplo, se ha creado un botón flotante que aparece en la parte inferior derecha de la página. Para hacer que el botón aparezca en la parte superior derecha, cambia la propiedad bottom a top y right a right.

Espero que te sea de ayuda.