Lo que deseo es subrayar los menús pero solamente las primeras 3 letras de cada menú con CSS. Estoy usando: text-decoration: underline #A1E26C;
pero lo subraya todo.
Muchas gracias
Para hacer lo que pides lo más sencillo es envolver el contenido que quieras subrayar en una etiqueta <span></span>
.
.sub {
text-decoration: underline;
}
<h1><span class="sub">Tit</span>ulo</h1>
<span></span>
Es una etiqueta de HTML que establece un elemento en línea al que puedes agregar atributos propios de este lenguaje, tales como class=""
o id=""
.
Estos atributos usados desde CSS te sirven para añadir las propiedades de estilo que necesites y se aplicaran al contenido al que el span envuelve.
Existen pseudo-elementos en CSS que nos permiten seleccionar también solo determinado contenido.
p:first-letter{} /*Aplica las propiedades a la primera letra de cada p*/
p:first-line{} /*Aplica las propiedades a la primera linea de cada p*/
La mejor forma seria usar simplemente un span
personalizado.
Si quieres lograr un efecto similar, pero en vede poner un bottom-border
a 3 letras, seria usando un ancho width
personalizable
Ejemplo span
:
/* Default reset */
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
}
span {
border-bottom: 3px solid red;
}
/* Efecto hover - span */
a:hover span {
border-bottom: 3px solid green;
}
<!-- Usando span -->
<a href="#"><span>Hol</span>a Mundo</a>
Ahora si deseas usar un ancho personalizable te dejo un ejemplo alternativo usando before
.
Ejemplo before
:
/* Default reset */
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
}
.under-line:before {
content: '';
display: block;
position: absolute;
top: 100%;
border-bottom: 3px solid red;
width: 30px;
/* Ancho personabizable */
}
.under-line {
display: block;
position: relative;
}
/* Efecto hover - :before */
a:hover.under-line:before {
border-bottom: 3px solid green;
}
<!-- Usando :before -->
<a href="#" class="under-line">Usando before</a>
<span>
. Modificare mi respuesta.
3ch
. Ejemplo: jsfiddle.net/rsxwLdkw
En html5 con css3 puedes utilizar la etiqueta
<mark>Texto subrayado</mark>
te dejo el link de w3schools aquí.
span
con las 3 primeras letras y aplicas el estilo e esa etiqueta (span) , es decir<a><span>Reg</span>istro</a>