html - sacarle - Cambio de color de subrayado

quitar el subrayado de los enlaces en html/css

Question

Tengo este código aquí:

echo "<u><font color=''red''><br>$username</font></u>";

En primer lugar, como puede ver, está subrayado (<u>). En segundo lugar, todo el texto es todo rojo. Bueno, ¿hay alguna forma de dejar el texto ($ username) rojo pero el subrayado negro?

Answer 1

Actualización del autor:
Esta respuesta no está actualizada ya que text-decoration-color ahora es compatible con la mayoría de los navegadores modernos.

: pseudo + em

Para replicar con precisión el tamaño, el ancho de trazo y el posicionamiento de la text-decoration:underline nativa text-decoration:underline sin introducir un marcado HTML adicional , debe usar un pseudo-element con unidades em . Esto permite una escala precisa del elemento y el comportamiento nativo sin marcado adicional.

CSS

`a {
text-decoration: none;
display: inline-table;
}
a:after {
content: "";
border-bottom: 0.1em solid #f00;
display: table-caption;
caption-side: bottom;
position: relative;
margin-top:-0.15em;
}`

Al usar display: table-caption y caption-side en el pseudo-elemento y mostrar inline-table , podemos forzar al navegador a alinear verticalmente tanto la línea como el enlace con precisión, incluso cuando se escala.

En este caso, usamos inline-table en lugar de inline-block para forzar el pseudo a visualizar sin la necesidad de especificar altura o valores negativos.

Ejemplos

JSFIDDLE : https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN : http://codepen.io/pohuski/pen/vEzxPj | (ejemplo con escala)

Probado con éxito en:
Internet Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrome: 45, 44, 43, 42
Safari: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Navegador de Android: 4.4, 2.3
Dolphin Mobile: 8, 11.4

Answer 2

Ahora hay una nueva propiedad css3 para esto: text-decoration-color

Así que ahora puede tener texto en un color y subrayado de decoración de texto, en un color diferente ... sin necesidad de un elemento adicional ''wrap''

p {
text-decoration: underline;
-webkit-text-decoration-color: red; /* safari still uses vendor prefix */
text-decoration-color: red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

NÓTESE BIEN:

1) El caniuse.com/#feat=text-decoration está limitado en este momento a Firefox y Chrome (totalmente compatible a partir de V57) y Safari.

2) También podría usar la propiedad abreviada text-decoration que se ve así:

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

... usando la taquigrafía de text-decoration , el ejemplo anterior sería simplemente:

p {
text-decoration: underline red;
}

p {
text-decoration: underline red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Answer 3

Creo que la forma más fácil de hacer esto es en su CSS, use:

text-decoration-color: red;

Esto cambiará el color del subrayado sin cambiar el color del texto. ¡Buena suerte!

Answer 4

El problema con el border-bottom es la distancia adicional entre el texto y la línea. El problema con el text-decoration-color es la falta de soporte del navegador. Por lo tanto, mi solución es el uso de una imagen de fondo con una línea. Esto admite cualquier marcado, color (es) y estilo de la línea. top (12px en mi ejemplo) depende line-height de line-height de su texto.

 u {
text-decoration: none;
background: transparent url(blackline.png) repeat-x 0px 12px;
}

Answer 5

En la práctica, es posible, si usa el elemento span lugar de la font :

<style>
u { color: black; }
.red { color: red }
</style>
<u><span class=''red''><br>$username</span></u>

Ver jsfiddle . Parece funcionar en Chrome, Safari, Firefox, IE, Opera (probado en Win 7 con las versiones más recientes).

El código en la pregunta debería funcionar también, pero no funciona por alguna razón en los navegadores WebKit (Chrome, Safari).

Según la especificación CSS : "El color (s) requerido para la decoración del texto debe derivarse del valor de la propiedad ''color'' del elemento sobre el que se establece ''decoración del texto''. El color de las decoraciones debe permanecer igual incluso si los elementos descendientes tienen diferentes valores de "color".

Answer 6

La forma más fácil que he abordado esto es con CSS:

<style>
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>

Además, para un subrayado real, si su artículo es un enlace, esto funciona:

<style>
a.blackUnderline {
color: #000000;
text-decoration: underline;
}
.red {
color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>

Answer 7

No. Lo mejor que puedes hacer es usar un border-bottom con un color diferente, pero eso no está realmente subrayando.

Answer 8

Otra forma en que describió Danield es tener en línea una pantalla de ancho de contenedor para niños y el tipo de color que desee. El ancho del elemento padre del texto-decoración y el color de subrayado que desee. Me gusta esto:

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}

<div>
<span>Hover me, i can have many lines</span>
</div>

Answer 9

Puede ajustar su <span> con un <a> y usar este pequeño plugin de JQuery para colorear el subrayado. Puede modificar el color pasando un parámetro al complemento.

 (function ($) {
$.fn.useful = function (params) {
var aCSS = {
''color'' : ''#d43'',
''text-decoration'' : ''underline''
};
$.extend(aCSS, params);
this.wrap(''<a></a>'');
var element = this.closest(''a'');
element.css(aCSS);
return element;
};
})(jQuery);

Entonces llama por escribir esto:

 $("span.name").useful({color:''red''});

$(function () {
var spanCSS = {
''color'' : ''#000'',
''text-decoration'': ''none''
};
$.fn.useful = function (params) {
var aCSS = {
''color'' : ''#d43'',
''text-decoration'' : ''underline''
};
$.extend(aCSS, params);
this.wrap(''<a></a>'');
this.closest(''a'').css(aCSS);
};
// Use example:
$("span.name").css(spanCSS).useful({color:''red''});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="user important">
<span class="name">Bob</span>
-
<span class="location">Bali</span>
</div>
<div class="user">
<span class="name">Dude</span>
-
<span class="location">Los Angeles</span>
</div>
<div class="user">
<span class="name">Gérard</span>
-
<span class="location">Paris</span>
</div>
</section>

Answer 10

Puede usar este CSS para "simular" un subrayado:

text-decoration: none;
border-bottom: 1px solid #000;

Answer 11

También puede usar la propiedad box-shadow para simular un subrayado.

Aquí hay un fiddle . La idea es utilizar dos sombras de cuadro en capas para colocar la línea en el mismo lugar que un subrayado.

a.underline {
text-decoration: none;
box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}

Answer 12

Un pseudo elemento funciona mejor.

a, a:hover {
position: relative;
text-decoration: none;
}
a:after {
content: '''';
display: block;
position: absolute;
height: 0;
top:90%;
left: 0;
right: 0;
border-bottom: solid 1px red;
}

Ver jsfiddle .

No necesita ningún elemento adicional, puede colocarlo tan cerca o tan lejos como desee del texto (el borde inferior es un poco lejos para mi gusto), no hay ningún color adicional que aparezca si su enlace ha terminado un fondo de diferente color (como con el truco de caja y sombra), y funciona en todos los navegadores (texto-decoración-color solo es compatible con Firefox hasta el momento).

Posible inconveniente: el enlace no puede ser posición: estático, pero probablemente no sea un problema la gran mayoría de las veces. Solo configúralo en relativo y todo está bien.

Answer 13

aquí podemos crear subrayado con color en el texto

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

o

¡El color de las líneas ahora debería ser rojo!

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>