{"id":15862,"date":"2023-07-18T13:00:00","date_gmt":"2023-07-18T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=15862"},"modified":"2023-07-18T15:27:51","modified_gmt":"2023-07-18T13:27:51","slug":"subrayados-de-texto-en-css","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/","title":{"rendered":"Subrayados de texto en CSS: C\u00f3mo mejorar el dise\u00f1o y la accesibilidad"},"content":{"rendered":"\n<p>En el mundo del dise\u00f1o web, cada detalle cuenta. Los subrayados de texto pueden parecer simples, pero su dise\u00f1o y aplicaci\u00f3n adecuada puede tener un gran efecto en la est\u00e9tica general y, lo que es m\u00e1s importante, en la legibilidad y accesibilidad del contenido en nuestro sitio web. Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a <strong>crear subrayados de texto en CSS<\/strong> que mejoren el dise\u00f1o y la usabilidad de tu sitio web. \u00a1Comencemos!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todos de subrayado en CSS<\/h2>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p>Para poder a\u00f1adir un subrayado a una parte de nuestro contenido en un sitio web, primero debemos resolver la cuesti\u00f3n de c\u00f3mo crearlo en CSS. Es importante tener en cuenta que no hay una \u00fanica forma de subrayar textos en CSS, sino que existen diferentes m\u00e9todos para lograrlo. Podemos emplear las <strong><a href=\"https:\/\/carontestudio.com\/blog\/listado-de-propiedades-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">propiedades<\/a> \u201ctext-decoration\u201d<\/strong> o <strong>\u201cborder-bottom\u201d<\/strong> para agregar el subrayado, o incluso podemos recurrir a <strong>pseudo-elementos<\/strong> para lograr el efecto deseado. A continuaci\u00f3n, explicaremos c\u00f3mo funciona cada uno de estos m\u00e9todos para que puedas elegir el m\u00e1s adecuado en funci\u00f3n de la situaci\u00f3n y el dise\u00f1o que est\u00e9s buscando.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"427\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css.jpg\" alt=\"Subrayado de texto en CSS\" class=\"wp-image-15876\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-300x200.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Uso de la propiedad \u00abtext-decoration\u00bb<\/h3>\n\n\n\n<p>La propiedad \u201ctext-decoration\u201d en CSS es una forma sencilla y efectiva de subrayar texto. Para utilizarla, simplemente asigna el <strong>valor \u201cunderline\u201d a la propiedad \u201ctext-decoration\u201d <\/strong>del elemento de texto que deseas subrayar. Por ejemplo, si quieres subrayar un \u201cspan\u201d, como en nuestro ejemplo, solo tienes que aplicar el siguiente estilo CSS: \u201cspan { text-decoration: underline; }\u201d. Tambi\u00e9n puedes combinar esta propiedad con otras opciones, como \u201cline-through\u201d para lograr un efecto tachado. Es una manera r\u00e1pida y vers\u00e1til de agregar un subrayado a tu contenido que te ofrece un control total sobre el grosor y el color del subrayado para adaptarlo a tu dise\u00f1o.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"dyQmagE\" data-user=\"carontestudio\" style=\"height: 300px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/dyQmagE\">\n  Text-decoration: underline<\/a> by Caronte Web Studio (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Crear subrayados con la propiedad \u00abborder-bottom\u00bb<\/h3>\n\n\n\n<p>Crear subrayados con la propiedad \u201cborder-bottom\u201d en CSS es otra forma interesante de resaltar parte de nuestro texto. En lugar de utilizar la propiedad \u00abtext-decoration\u00bb,<strong> podemos aplicar un borde en la parte inferior del texto mediante \u201cborder-bottom\u201d<\/strong>. Por ejemplo, si deseamos subrayar nuestro \u201cspan\u201d, podemos utilizar el siguiente estilo CSS: \u201cspan { border-bottom: 1px solid black; }\u201d. Mediante los tres valores que hemos indicado en el CSS, se especifica primero el grosor del subrayado (1px), luego el tipo de subrayado (solid), y por \u00faltimo el color del subrayado (black). Haciendo variaciones en estos tres valores, podremos obtener el resultado que estemos buscando para nuestro dise\u00f1o.<\/p>\n\n\n\n<p>El estilo de subrayado, el segundo valor que hemos especificado en la propiedad, tiene 10 opciones diferentes entre las que elegir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>none<\/li>\n\n\n\n<li>hidden<\/li>\n\n\n\n<li>dotted<\/li>\n\n\n\n<li>dashed<\/li>\n\n\n\n<li>solid<\/li>\n\n\n\n<li>double<\/li>\n\n\n\n<li>groove<\/li>\n\n\n\n<li>ridge<\/li>\n\n\n\n<li>inset<\/li>\n\n\n\n<li>outset<\/li>\n<\/ul>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"xxQWMQQ\" data-user=\"carontestudio\" style=\"height: 300px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/xxQWMQQ\">\n  Border-botom<\/a> by Caronte Web Studio (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n<p> Adem\u00e1s, es posible aplicar esta t\u00e9cnica a diversos elementos, no solo a texto, lo que nos aporta m\u00e1s versatilidad y creatividad a la hora de resaltar contenido en nuestros sitios web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Subrayados mediante pseudo-elementos<\/h3>\n\n\n\n<p>Aplicar subrayados en CSS mediante pseudo-elementos nos da una mayor libertad creativa. Para utilizarlo, usaremos los <strong>pseudo-elementos \u00ab::before\u201d o \u00ab::after\u201d para crear una l\u00ednea debajo del texto que deseamos resaltar<\/strong>. Con esta t\u00e9cnica, tenemos un control completo sobre el grosor, el color y el estilo del subrayado, lo que nos permite personalizarlo para que se ajuste perfectamente al dise\u00f1o de nuestro sitio web. As\u00ed que, si buscas un subrayado con un toque \u00fanico y creativo, los pseudo-elementos son la opci\u00f3n ideal para destacar tus textos de manera diferente y atractiva.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"bGQvzyq\" data-user=\"carontestudio\" style=\"height: 300px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/carontestudio\/pen\/bGQvzyq\">\n  Pseudo-elemento<\/a> by Caronte Web Studio (<a href=\"https:\/\/codepen.io\/carontestudio\">@carontestudio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Personalizaci\u00f3n de subrayados de texto<\/h2>\n\n\n\n<p>Partiendo de estas tres formas de subrayar texto en CSS, el mundo de los subrayados se abre ante nosotros con infinidad de opciones creativas. Podemos jugar con el tama\u00f1o del subrayado, atrevernos con colores vibrantes o sutiles, experimentar con distintos estilos de l\u00edneas, e incluso darles movimiento. S\u00ed, <strong>los subrayados tambi\u00e9n pueden ser animados<\/strong> y esta funcionalidad nos da posibilidades ilimitadas. Podemos hacer que los subrayados que aparecen gradualmente, desliz\u00e1ndose bajo el texto, o incluso conseguir que cuando el usuario pase por encima de alg\u00fan texto, este se vaya subrayando. La posibilidad de combinar personalizaci\u00f3n y animaci\u00f3n en los subrayados ofrece dinamismo a nuestras p\u00e1ginas web. <\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p>Sin embargo, como siempre se dice, en dise\u00f1o \u201cmenos es m\u00e1s\u201d, el objetivo de subrayar es dar importancia a cierto contenido, <strong>si todo est\u00e1 subrayado, nada ser\u00e1 importante<\/strong> (como nos pasaba al subrayar nuestros apuntes antes de un examen). Lo mismo sucede con las animaciones en el mundo web, si todo est\u00e1 animado, el usuario tendr\u00e1 demasiados est\u00edmulos y no le estaremos ofreciendo una experiencia correcta.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"427\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-html.jpg\" alt=\"Subrayados de texto en CSS\" class=\"wp-image-15878\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-html.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-html-300x200.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"425\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-en-texto-en-css.jpg\" alt=\"Subrayados de texto en CSS web\" class=\"wp-image-15877\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-en-texto-en-css.jpg 640w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-en-texto-en-css-300x199.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Mejores pr\u00e1cticas para el uso de subrayados de texto<\/h2>\n\n\n\n<p>Cuando se trata de subrayar texto en una web, es importante seguir algunas pr\u00e1cticas para garantizar un dise\u00f1o atractivo y una experiencia de usuario positiva. En primer lugar, como acabamos de mencionar, es fundamental <strong>no abusar de los subrayados<\/strong>. Util\u00edzalos con moderaci\u00f3n y resalta solo los elementos realmente importantes o enlaces para no saturar visualmente la p\u00e1gina. <\/p>\n\n\n\n<p>Por otro lado, tenemos que asegurarnos de que el color y el grosor del subrayado <strong>contrasten adecuadamente con el fondo y el texto<\/strong>, as\u00ed mejoraremos la legibilidad y facilitar\u00e1 la comprensi\u00f3n del contenido. <\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Otra pr\u00e1ctica importante es mantener la <strong>coherencia en el dise\u00f1o<\/strong>. Utiliza un estilo de subrayado consistente en todo el sitio para ofrecer una apariencia profesional. Si subrayamos de 20 maneras diferentes el contenido relevante en nuestra web, el usuario no sabr\u00e1 distinguir qu\u00e9 tipo de subrayado tendr\u00e1 m\u00e1s relevancia en el contenido. <\/p>\n\n\n\n<p>Por \u00faltimo, aseg\u00farate de que los subrayados sean lo <strong>suficientemente visibles <\/strong>para usuarios con discapacidades visuales y que se destaquen claramente como enlaces para facilitar la navegaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n: Subrayados de texto en CSS<\/h2>\n\n\n\n<p>En conclusi\u00f3n, como hemos visto en este art\u00edculo, los subrayados de texto en CSS ofrecen una herramienta valiosa y vers\u00e1til para realzar el contenido en nuestras p\u00e1ginas web. Su simplicidad de implementaci\u00f3n nos permite jerarquizar el contenido y captar la atenci\u00f3n del usuario hacia informaci\u00f3n relevante. <\/p>\n\n\n\n<p>Adem\u00e1s, siguiendo las pr\u00e1cticas que hemos comentado, podemos asegurarnos de que<strong> los subrayados<\/strong> no solo <strong>mejoren el aspecto est\u00e9tico de nuestro sitio web<\/strong>, sino que tambi\u00e9n <strong>optimicen la usabilidad y la accesibilidad<\/strong> para todos los visitantes. Ya sea subrayando enlaces importantes, a\u00f1adiendo toques animados o personalizando el estilo seg\u00fan la identidad visual de nuestra marca, los subrayados de texto en CSS se convierten en un recurso valioso para mejorar la experiencia global de nuestros usuarios y destacar nuestro contenido de manera efectiva. \u00a1As\u00ed que no dudes en experimentar y crear todo tipo de subrayados que ayuden a mejorar tu dise\u00f1o web!<\/p>\n\n\n\n<p>No dudes en compartir con nosotros tus aportaciones en los comentarios.<\/p>\n\n\n\n<p>\u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/listado-de-propiedades-css\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-1024x604.jpg\" alt=\"Listado completo de propiedades CSS.\" class=\"wp-image-8918\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/02\/listado_de_propiedades_css-1.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/que-significa-css-guia-basica\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css-1024x604.jpg\" alt=\"\u00bfQu\u00e9 siginifica CSS?\" class=\"wp-image-11168\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css-600x354.jpg 600w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/09\/que-es-css.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.<\/p>\n","protected":false},"author":21,"featured_media":15893,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-15862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Subrayados de texto en CSS - Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Subrayados de texto en CSS - Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-18T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T13:27:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"Subrayados de texto en CSS: C\u00f3mo mejorar el dise\u00f1o y la accesibilidad\",\"datePublished\":\"2023-07-18T11:00:00+00:00\",\"dateModified\":\"2023-07-18T13:27:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/\"},\"wordCount\":1187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/\",\"name\":\"Subrayados de texto en CSS - Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg\",\"datePublished\":\"2023-07-18T11:00:00+00:00\",\"dateModified\":\"2023-07-18T13:27:51+00:00\",\"description\":\"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Subrayados de texto en CSS: mejorar la accesibilidad\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/subrayados-de-texto-en-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Subrayados de texto en CSS: C\u00f3mo mejorar el dise\u00f1o y la accesibilidad\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Subrayados de texto en CSS - Caronte Web Studio","description":"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/","og_locale":"es_ES","og_type":"article","og_title":"Subrayados de texto en CSS - Caronte Web Studio","og_description":"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.","og_url":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2023-07-18T11:00:00+00:00","article_modified_time":"2023-07-18T13:27:51+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"Subrayados de texto en CSS: C\u00f3mo mejorar el dise\u00f1o y la accesibilidad","datePublished":"2023-07-18T11:00:00+00:00","dateModified":"2023-07-18T13:27:51+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/"},"wordCount":1187,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/","url":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/","name":"Subrayados de texto en CSS - Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg","datePublished":"2023-07-18T11:00:00+00:00","dateModified":"2023-07-18T13:27:51+00:00","description":"Acomp\u00e1\u00f1anos en este art\u00edculo y aprende a crear subrayados de texto en CSS que mejoren el dise\u00f1o y la usabilidad de tu sitio web.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/07\/subrayados-de-texto-en-css-mejorar-accesibilidad.jpg","width":1250,"height":737,"caption":"Subrayados de texto en CSS: mejorar la accesibilidad"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/subrayados-de-texto-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Subrayados de texto en CSS: C\u00f3mo mejorar el dise\u00f1o y la accesibilidad"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/15862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=15862"}],"version-history":[{"count":26,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/15862\/revisions"}],"predecessor-version":[{"id":15898,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/15862\/revisions\/15898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/15893"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=15862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=15862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=15862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}