El a:before se usa para crear un elemento antes del contenido de la etiqueta de anclaje y muestra la parte a:before subrayada de manera predeterminada. Para eliminar el subrayado de a:before, use la propiedad de decoración de texto de CSS y configure la visualización del elemento en bloque en línea.
Sintaxis:
text-decoration:none; display:inline-block;
Ejemplo 1: este ejemplo establece la propiedad de decoración de texto en none.
<!DOCTYPE html>
<html>
<head>
<title>
How to remove underline
from a:before using CSS?
</title>
<style>
#test a {
color: #05ff05;
text-decoration: none;
}
#test a:before {
color: #05ff05;
content: "* ";
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">GeeksForGeeks</h1>
<h3>Original Link</h3>
<a href="https://www.geeksforgeeks.org/">Link 1</a>
<br>
<div id="test">
<h3>Removed Underline</h3>
<a id="GFG" href="https://www.geeksforgeeks.org/">
Link 2
</a>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza la propiedad de desplazamiento para eliminar el subrayado cuando el mouse se mueve sobre la parte a:before.
<!DOCTYPE html>
<html>
<head>
<title>
How to remove underline
from a:before using CSS?
</title>
<style>
#test a {
color: #05ff05;
}
#test a:hover {
color: #05ff05;
text-decoration: none;
}
#test a:before {
color: #05ff05;
content: "**";
}
#test a:before:hover {
color: #05ff05;
content: "**";
display: inline-block;
text-decoration: none;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">GeeksForGeeks</h1>
<h3>Original Link</h3>
<a href="https://www.geeksforgeeks.org/">Link 1</a>
<br>
<div id="test">
<h3>Removed Underline</h3>
<a id="GFG" href="https://www.geeksforgeeks.org/">
Link 2
</a>
</div>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo elimina el subrayado solo de la parte a:before.
<!DOCTYPE html>
<html>
<head>
<title>
How to remove underline
from a:before using CSS?
</title>
<style>
#test a {
color: #05ff05;
}
#test a:before {
color: #05ff05;
content: "**";
display: inline-block;
text-decoration: none;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">GeeksForGeeks</h1>
<h3>Original Link</h3>
<a href="https://www.geeksforgeeks.org/">Link 1</a>
<br>
<div id="test">
<h3>Removed Underline</h3>
<a id="GFG" href="https://www.geeksforgeeks.org/">
Link 2
</a>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA