Background：linear-gradient, text-shadow, text-decoration.
Hay muchos problemas con el efecto de subrayado implementado por text-decoration: underline, como la incapacidad para controlar la ubicación, la incapacidad para evitar (el navegador text-decoration-skip casi no es compatible) y, lo que es más importante, realmente molesta obsessive-compulsive disorder. Además, los diferentes idiomas tienen diferentes hábitos de alineación, el chino está alineado en el centro y el inglés está alineado con la línea de base, por lo que es altamente recomendable implementar guiones bajos personalizados.
box-shadow simulate underline effect.
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
box-shadow: 0 -1px 0 0 #b4a078 inset;
}
</style>
<main ref="main">
<p><a>por favor agregue hermoso efecto de subrayado</a></p>
</main>{PAGEBREAK}
pseudo element after simulate underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
position: relative;
}
p > a:after {
content: '';
width: 100%;
position: absolute;
bottom: 0; right: 0; left: 0;
border-bottom: 1px solid #b4a078;
}
</style>
<main ref="main">
<p><a>por favor agregue hermoso efecto de subrayado</a></p>
</main>{PAGEBREAK}
linear-gradient simulate underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1.5 Helvetica, sans-serif;
}
p > a {
padding-bottom: 1px;
background: linear-gradient(#b4a078, #b4a078) no-repeat;
background-size: 100% 1px;
background-position: 0 18px;
}
p > a:hover{
animation: text-underline-slideInLeft 1.2s linear infinite forwards;
}
@keyframes text-underline-slideInLeft {
from {
background-position-x: -432px;
}
50% {
background-position-x: 0;
}
to {
background-position-x: 432px;
}
}
</style>
<main ref="main">
<p><a>por favor agregue hermoso efecto de subrayado</a></p>
</main>{PAGEBREAK}
linear-gradient + text-shadow simulate solid underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
background: linear-gradient(#b4a078, #b4a078) no-repeat;
background-size: 100% 1px;
background-position: 0 1em;
text-shadow: .05em 0 white, -.05em 0 white; /* avoid parts below the baseline*/
}
p > a:hover{
animation: text-underline-slideInLeft 1.2s linear infinite forwards;
}
@keyframes text-underline-slideInLeft {
from {
background-position-x: -432px;
}
50% {
background-position-x: 0;
}
to {
background-position-x: 432px;
}
}
</style>
<main ref="main">
<p><a>CSS tricks web developerperpers need to know!</a></p>
</main>{PAGEBREAK}
linear-gradient + text-shadow simulate dashed underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
background: linear-gradient(90deg, #b4a078 66%, transparent 0) repeat-x;
background-size: .3em 1px;
background-position: 0 1em;
text-shadow: .05em 0 white, -.05em 0 white; /* avoid parts below the baseline*/
}
</style>
<main ref="main">
<p><a>Trucos de CSS3 que los desarrolladores de web necesitan saber!</a></p>
</main>{PAGEBREAK}
linear-gradient + text-shadow simulate wavy underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
background: linear-gradient(45deg, transparent 45%, #b4a078 45%, #b4a078 60%, transparent 0),
linear-gradient(-45deg, transparent 45%, #b4a078 45%, #b4a078 60%, transparent 0);
background-repeat: repeat-x;
background-size: .3em .15em;
background-position: 0 1em, .2em 1em;
text-shadow: .05em 0 white, -.05em 0 white; /* avoid parts below the baseline*/
}
</style>
<main ref="main">
<p><a>Trucos de CSS3 que los desarrolladores de web necesitan saber!</a></p>
</main>{PAGEBREAK}
text-decoration: underline wavy #34495e achieve wavy underline effect
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 39px 0;
-select: none;
font: 16px / 1 Helvetica, sans-serif;
}
p > a {
text-decoration: underline wavy #b4a078;
}
</style>
<main ref="main">
<p><a>Trucos de CSS3 que los desarrolladores de web necesitan saber!</a></p>
</main>
Contras: Apenas es compatible con los navegadores text-decoration: underline wavy #34495e, además, no podemos controlar el tamaño de la línea ondulada por separado.
