--- title: CSS to speech: alternative text for CSS-generated content description: CSS pseudo-elements like ::before and ::after can insert content that becomes part of an element's accessible name, but this content may not be properly... canonical: https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS to speech: alternative text for CSS-generated content | daily.dev og:description: CSS pseudo-elements like ::before and ::after can insert content that becomes part of an element's accessible name, but this content may not be properly... og:url: https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne og:image: https://api.daily.dev/og/posts/F6MzTiXne.png og:image:alt: CSS to speech: alternative text for CSS-generated content og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS to speech: alternative text for CSS-generated content **[Sara Soueidan](https://daily.dev/sources/sarasoueidan)** · 14 min read · 13 upvotes · 0 comments ## Summary CSS pseudo-elements like ::before and ::after can insert content that becomes part of an element's accessible name, but this content may not be properly announced by screen readers. The CSS Generated Content Module Level 3 now allows alternative text to be specified after a slash in the content property, enabling developers to provide descriptive text for meaningful content or hide decorative content from assistive technologies. However, meaningful content should still be placed in HTML rather than CSS, as CSS-generated content has limitations including lack of translation support, invisibility in reader modes, and non-searchable text. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS to speech: alternative text for CSS-generated content","url":"https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne"},"datePublished":"2025-09-17T16:15:53.661Z","dateModified":"2025-09-17T16:16:16.348Z","description":"CSS pseudo-elements like ::before and ::after can insert content that becomes part of an element's accessible name, but this content may not be properly...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/52288571b7aa78a15db62b5cc9b2a838?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/52288571b7aa78a15db62b5cc9b2a838?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"Sara Soueidan","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Sara Soueidan","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/9a1226457d234dbdb689426e6492547b","url":"https://daily.dev/sources/sarasoueidan"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/css-to-speech-alternative-text-for-css-generated-content-f6mztixne","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":13},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css,accessibility","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sara Soueidan","item":"https://daily.dev/sources/sarasoueidan"},{"@type":"ListItem","position":3,"name":"CSS to speech: alternative text for CSS-generated content"}]} ```