{"id":1299,"date":"2025-02-23T10:37:57","date_gmt":"2025-02-23T08:37:57","guid":{"rendered":"https:\/\/eouilplg.elementor.cloud\/?p=1299"},"modified":"2025-12-07T16:33:56","modified_gmt":"2025-12-07T14:33:56","slug":"how-to-underline-text-in-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/","title":{"rendered":"How To Underline Text In CSS? (CSS text-decoration property)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1299\" class=\"elementor elementor-1299\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca5190e e-flex e-con-boxed e-con e-parent\" data-id=\"ca5190e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e047a4 elementor-widget elementor-widget-text-editor\" data-id=\"9e047a4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In this comprehensive guide, we&#8217;ll explore the basics of underlining text using CSS (Cascading Style Sheets), explore customization options, and discuss best practices for using underlines effectively. Whether you&#8217;re an Elementor user or simply interested in styling your website, this guide will provide you with the tools to master <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"27859\">CSS<\/a> underlines.<\/span><\/p><h2><span style=\"font-weight: 400;\">The Basics of CSS Underlining<\/span><\/h2><p><span style=\"font-weight: 400;\">The foundation of underlining text in CSS lies in the text-decoration property. This versatile property lets you control not only underlining but also overlines, line-throughs, and combinations thereof. Let&#8217;s focus on the core value that creates underlines:<\/span><\/p><h3><span style=\"font-weight: 400;\">The &#8216;underline&#8217; Value<\/span><\/h3><p><span style=\"font-weight: 400;\">To add a basic underline to any text element, you&#8217;ll use the following CSS code:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08e6fe0 elementor-widget elementor-widget-code-highlight\" data-id=\"08e6fe0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \/* Targets paragraph elements *\/\r\n  text-decoration: underline;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4e0ac0 elementor-widget elementor-widget-text-editor\" data-id=\"d4e0ac0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">This simple code snippet will apply an underline to all &lt;p&gt; elements (paragraphs) on your website. You can target different elements by replacing the selector (p in this case) with the appropriate HTML tag:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>h1, h2, h3,<\/b><span style=\"font-weight: 400;\"> etc. for headings<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>span<\/b><span style=\"font-weight: 400;\"> for specific text portions within other elements<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>a<\/b><span style=\"font-weight: 400;\"> for links<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">If you&#8217;re using the Elementor website builder, applying underlines is incredibly intuitive. Within the Elementor editor, select the text element you want to style, navigate to the &#8220;Style&#8221; tab, and you&#8217;ll find the &#8220;Text Decoration&#8221; option with &#8216;underline&#8217; readily available.<\/span><\/p><p><b>Understanding Specificity:<\/b><span style=\"font-weight: 400;\"> It&#8217;s important to be aware that CSS rules cascade, meaning more specific rules take precedence. If you have multiple CSS rules targeting the same element with conflicting text-decoration values, the most specific selector will win.<\/span><\/p><h3><span style=\"font-weight: 400;\">Targeting Specific Elements\u00a0<\/span><\/h3><p><span style=\"font-weight: 400;\">While you can apply underlines broadly, you&#8217;ll often want to be more selective. Using CSS classes and IDs provides granular control:<\/span><\/p><h4><span style=\"font-weight: 400;\">Classes<\/span><\/h4><ul><li>HTML<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aac7afb elementor-widget elementor-widget-code-highlight\" data-id=\"aac7afb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p class=\"important-text\">This text will be underlined.<\/p>\r\n\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13c7d33 elementor-widget elementor-widget-text-editor\" data-id=\"13c7d33\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><span style=\"font-weight: 400;\">CSS<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-584f8cb elementor-widget elementor-widget-code-highlight\" data-id=\"584f8cb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.important-text {\r\n  text-decoration: underline;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2888a9c elementor-widget elementor-widget-text-editor\" data-id=\"2888a9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">IDs<\/span><\/p><ul><li><span style=\"font-weight: 400;\">HTML<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ef1fff elementor-widget elementor-widget-code-highlight\" data-id=\"4ef1fff\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<h2 id=\"section-title\">This heading is underlined.<\/h2>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34fe70a elementor-widget elementor-widget-text-editor\" data-id=\"34fe70a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>CSS<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe68ac2 elementor-widget elementor-widget-code-highlight\" data-id=\"fe68ac2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#section-title {\r\n  text-decoration: underline; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9847924 elementor-widget elementor-widget-text-editor\" data-id=\"9847924\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Key Points<\/span><\/h4><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Classes (prefixed with a . ) can be applied to multiple elements, while IDs (prefixed with a # ) should be unique on a page.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Elementor&#8217;s editor allows you to assign classes and IDs directly within the interface for easy styling.<\/span><\/li><\/ul><h2><span style=\"font-weight: 400;\">Advanced Underline Customization\u00a0<\/span><\/h2><h3><span style=\"font-weight: 400;\">Color: Styling Underlines with &#8216;text-decoration-color&#8217;<\/span><\/h3><p><span style=\"font-weight: 400;\">The default underline color typically matches the text color itself. However, the text-decoration-color property lets you get creative!<\/span><\/p><p><span style=\"font-weight: 400;\">Here&#8217;s an example of underlining a heading in red:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8c6d81 elementor-widget elementor-widget-code-highlight\" data-id=\"e8c6d81\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  text-decoration: underline;\r\n  text-decoration-color: red;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6d9d9a elementor-widget elementor-widget-text-editor\" data-id=\"c6d9d9a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Use Cases<\/span><\/h4><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Branding:<\/b><span style=\"font-weight: 400;\"> Match underlines to your brand colors.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Emphasis:<\/b><span style=\"font-weight: 400;\"> Draw attention to specific phrases with contrasting underline colors.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hover Effects:<\/b><span style=\"font-weight: 400;\"> Change the underlined color when users hover over elements (often used for links).<\/span><\/li><\/ol><p><b>Elementor Tip:<\/b><span style=\"font-weight: 400;\"> Within Elementor&#8217;s visual editor, you&#8217;ll find the &#8220;Text Decoration Color&#8221; option alongside the main underline setting, making customization a breeze.<\/span><\/p><h3><span style=\"font-weight: 400;\">Style: Exploring &#8216;text-decoration-style&#8217;<\/span><\/h3><p><span style=\"font-weight: 400;\">Beyond the standard solid underline, CSS offers several styles:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>double:<\/b><span style=\"font-weight: 400;\"> Creates a double underline.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>dotted:<\/b><span style=\"font-weight: 400;\"> Renders a dotted underline.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>dashed:<\/b><span style=\"font-weight: 400;\"> Creates a dashed underline.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>wavy:<\/b><span style=\"font-weight: 400;\"> A playful, wavy underline effect.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">Example:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-194c578 elementor-widget elementor-widget-code-highlight\" data-id=\"194c578\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np.wavy-underline {\r\n  text-decoration: underline;\r\n  text-decoration-style: wavy;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-466887d elementor-widget elementor-widget-text-editor\" data-id=\"466887d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Use with Caution:<\/b><span style=\"font-weight: 400;\"> Decorative underlines (dotted, dashed, wavy) should be used sparingly as they can impact readability if overused.<\/span><\/p><h3><span style=\"font-weight: 400;\">Thickness: Controlling Underline Thickness<\/span><\/h3><p><span style=\"font-weight: 400;\">The text-decoration-thickness property provides precise control over how thick your underlines appear. You can specify thickness in several ways:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixels:<\/b><span style=\"font-weight: 400;\"> text-decoration-thickness: 3px;<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Relative Units:<\/b><span style=\"font-weight: 400;\"> text-decoration-thickness: 0.2em; (relative to the element&#8217;s font size)<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Keyword:<\/b><span style=\"font-weight: 400;\"> text-decoration-thickness: auto; (browser&#8217;s default)<\/span><\/li><\/ul><h4><span style=\"font-weight: 400;\">Example:<\/span><\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bbbd7b elementor-widget elementor-widget-code-highlight\" data-id=\"7bbbd7b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 { \r\n  text-decoration: underline;\r\n  text-decoration-thickness: 4px;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4ca028 elementor-widget elementor-widget-text-editor\" data-id=\"b4ca028\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Accessibility Note:<\/b><span style=\"font-weight: 400;\"> Ensure sufficient underline thickness for easy visual recognition, especially for users with visual impairments.<\/span><\/p><p><b>Removing Underlines: The &#8216;none&#8217; Value<\/b><\/p><p><span style=\"font-weight: 400;\">Sometimes, you&#8217;ll want to remove default underlines (like on links) or override previously applied underlines. The text-decoration: none; value comes in handy for this:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ff0510 elementor-widget elementor-widget-code-highlight\" data-id=\"9ff0510\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na { \/* Targets all links *\/\r\n  text-decoration: none; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f959f6 elementor-widget elementor-widget-text-editor\" data-id=\"4f959f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Common Use Case:<\/b><span style=\"font-weight: 400;\"> Many websites choose to remove the default underline from links, relying on other visual cues (color changes, hover effects) to indicate clickability.<\/span><\/p><h2><span style=\"font-weight: 400;\">Underlining for Emphasis, Accessibility &amp; Design\u00a0<\/span><\/h2><h3><span style=\"font-weight: 400;\">Strategic Emphasis: Guiding User Attention<\/span><\/h3><p><span style=\"font-weight: 400;\">Underlines can be a powerful tool to highlight key information or call attention to specific sections of your website. Here are some common use cases:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Important Headings:<\/b><span style=\"font-weight: 400;\"> Underline subheadings to create a visual hierarchy and guide the reader&#8217;s eye through your content.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Call-to-Action Buttons:<\/b><span style=\"font-weight: 400;\"> underline a button&#8217;s text to encourage clicks.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Highlighting Keywords:<\/b><span style=\"font-weight: 400;\"> Underline specific keywords within a paragraph to emphasize their importance for both users and search engines.<\/span><\/li><\/ul><h3><span style=\"font-weight: 400;\">Accessibility Considerations<\/span><\/h3><p><span style=\"font-weight: 400;\">While underlines can be helpful for emphasis, it&#8217;s crucial to be mindful of accessibility:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Avoid Overreliance on Color:<\/b><span style=\"font-weight: 400;\"> Traditionally, underlines strongly indicate links. Users with colorblindness may struggle if you rely solely on color to differentiate clickable elements.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sufficient Contrast:<\/b><span style=\"font-weight: 400;\"> Ensure your underlines have enough contrast against the background color for easy readability.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Alternative Indicators:<\/b><span style=\"font-weight: 400;\"> For enhanced accessibility, combine underlines with other visual cues, such as hover effects, bolding, or icons.<\/span><\/li><\/ol><h3><span style=\"font-weight: 400;\">Underlines in Navigation Menus<\/span><\/h3><p><span style=\"font-weight: 400;\">Navigation menus are a prime spot to incorporate underlines for clear visual cues:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Active Tab Indication:<\/b><span style=\"font-weight: 400;\"> Underline the currently active page or section in your navigation menu.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hover Effects:<\/b><span style=\"font-weight: 400;\"> Add underlines that appear when users hover over navigation links, providing further interaction feedback.<\/span><\/li><\/ul><p><b>Tip:<\/b><span style=\"font-weight: 400;\"> Elementor offers built-in styling options and dynamic features to customize underlines in your website&#8217;s navigation easily.<\/span><\/p><h3><span style=\"font-weight: 400;\">Creative Applications of Underlines<\/span><\/h3><p><span style=\"font-weight: 400;\">Beyond the basics, underlines can add visual flair to your website:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Separating Content Sections:<\/b><span style=\"font-weight: 400;\"> Use underlines in place of traditional borders or dividers to break up content areas. This can create a clean, minimalist aesthetic.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Highlighting Form Fields:<\/b><span style=\"font-weight: 400;\"> Underline input fields on your forms to provide a clear focus area for users.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Indicating Errors:<\/b><span style=\"font-weight: 400;\"> Underline invalid form entries in a contrasting color (like red) to signal areas needing correction instantly.<\/span><\/li><\/ol><h4><span style=\"font-weight: 400;\">Elementor&#8217;s Advantage<\/span><\/h4><p><span style=\"font-weight: 400;\">Elementor&#8217;s intuitive visual editor allows you to experiment with these creative underline applications effortlessly. You can easily adjust colors, styles, thicknesses, and placement without needing to dive deep into the code.<\/span><\/p><p><b>Important Note:<\/b><span style=\"font-weight: 400;\"> Always use underlines in a way that enhances usability and is consistent with the overall clarity of your website&#8217;s design.<\/span><\/p><h2><span style=\"font-weight: 400;\">Advanced CSS Properties &amp; Techniques\u00a0<\/span><\/h2><p><span style=\"font-weight: 400;\">Certainly! Here are more detailed explanations and examples for the advanced CSS properties `text-decoration-skip-ink` and `text-underline-offset`:<\/span><\/p><p><span style=\"font-weight: 400;\">`text-decoration-skip-ink`:<\/span><\/p><p><span style=\"font-weight: 400;\">The `text-decoration-skip-ink` property allows you to control how the underline interacts with descenders in text. Descenders are the parts of letters that extend below the baseline, such as in the lowercase letters &#8220;g&#8221;, &#8220;j&#8221;, &#8220;p&#8221;, &#8220;q&#8221;, and &#8220;y&#8221;. By default, the underline is drawn continuously, even if it intersects with descenders. The `text-decoration-skip-ink` property provides options to adjust this behavior.<\/span><\/p><p><span style=\"font-weight: 400;\">Example:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e7ceaf elementor-widget elementor-widget-code-highlight\" data-id=\"8e7ceaf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>css\r\np {\r\n  text-decoration: underline;\r\n  text-decoration-skip-ink: auto;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-158dcc8 elementor-widget elementor-widget-text-editor\" data-id=\"158dcc8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The `text-decoration-skip-ink` property accepts the following values:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00a0`auto` (default): The underline will skip over descenders when it would otherwise cross over them, creating a more visually pleasing appearance.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00a0`none`: The underline will be drawn continuously, even if it intersects with descenders.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00a0`all`: The underline will skip over any part of the text, including descenders and other parts of the glyphs.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">Here&#8217;s an example that demonstrates the difference between `auto` and `none`:<\/span><\/p><ul><li>HTML<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8da26c elementor-widget elementor-widget-code-highlight\" data-id=\"e8da26c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>html\r\n<p class=\"skip-ink-auto\">This text has a continuous underline that skips descenders.<\/p>\r\n<p class=\"skip-ink-none\">This text has a continuous underline that intersects with descenders.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b716bf1 elementor-widget elementor-widget-text-editor\" data-id=\"b716bf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>CSS<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d42eb8 elementor-widget elementor-widget-code-highlight\" data-id=\"2d42eb8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.skip-ink-auto {\r\n  text-decoration: underline;\r\n  text-decoration-skip-ink: auto;\r\n}\r\n.skip-ink-none {\r\n  text-decoration: underline;\r\n  text-decoration-skip-ink: none;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5baccbf elementor-widget elementor-widget-text-editor\" data-id=\"5baccbf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In the above example, the first paragraph will have an underline that skips over the descenders, while the second paragraph will have an underline that intersects with the descenders.<\/span><\/p><p><span style=\"font-weight: 400;\">`text-underline-offset`:<\/span><\/p><p><span style=\"font-weight: 400;\">The `text-underline-offset` property allows you to control the distance between the underline and the text precisely. By default, the underline is placed just below the text. However, you can use `text-underline-offset` to adjust the vertical position of the underline.<\/span><\/p><p><span style=\"font-weight: 400;\">Example:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ff9a9d elementor-widget elementor-widget-code-highlight\" data-id=\"6ff9a9d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  text-decoration: underline;\r\n  text-underline-offset: 5px;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39c8a78 elementor-widget elementor-widget-text-editor\" data-id=\"39c8a78\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In this example, the underline will be positioned 5 pixels below the text of the `&lt;h2&gt;` element. You can specify the offset value using various units such as pixels (`px`), ems (`em`), or percentages (`%`).<\/span><\/p><p><span style=\"font-weight: 400;\">Here&#8217;s an example that demonstrates different offset values:<\/span><\/p><ul><li><span style=\"font-weight: 400;\">html<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fed7846 elementor-widget elementor-widget-code-highlight\" data-id=\"fed7846\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>html\r\n<h2 class=\"offset-small\">This text has a small underline offset.<\/h2>\r\n<h2 class=\"offset-large\">This text has a large underline offset.<\/h2>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d17ef8a elementor-widget elementor-widget-text-editor\" data-id=\"d17ef8a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><span style=\"font-weight: 400;\">CSS<\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eadb033 elementor-widget elementor-widget-code-highlight\" data-id=\"eadb033\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.offset-small {\r\n  text-decoration: underline;\r\n  text-underline-offset: 2px;\r\n}\r\n.offset-large {\r\n  text-decoration: underline;\r\n  text-underline-offset: 0.5em;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73c55fd elementor-widget elementor-widget-text-editor\" data-id=\"73c55fd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In the above example, the first heading will have an underline offset of 2 pixels, while the second heading will have an underline offset of 0.5 ems, which is relative to the font size of the element.<\/span><\/p><p><span style=\"font-weight: 400;\">Using `text-underline-offset` can be particularly useful in scenarios where you want to create a distinct visual separation between the text and the underline or when you need to accommodate larger font sizes or specific design requirements.<\/span><\/p><p><span style=\"font-weight: 400;\">By combining `text-decoration-skip-ink` and `text-underline-offset`, you can fine-tune the appearance of underlines to achieve the desired visual effect and ensure optimal readability across different text styles and font sizes.<\/span><\/p><h2><span style=\"font-weight: 400;\">Underlines in the Context of Web Design<\/span><\/h2><h3><span style=\"font-weight: 400;\">Responsive Considerations<\/span><\/h3><p><span style=\"font-weight: 400;\">As websites need to adapt to different screen sizes, it&#8217;s essential to ensure your underlines behave responsively:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Line Thickness:<\/b><span style=\"font-weight: 400;\"> Test how your underline thickness scales across devices. If it&#8217;s too thick, underlines might overpower text on smaller screens.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Spacing:<\/b><span style=\"font-weight: 400;\"> Use text-underline-offset to maintain appropriate spacing between underlines and text on varying screen sizes.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Media Queries:<\/b><span style=\"font-weight: 400;\"> Employ CSS media queries to adjust underline styles for specific screen sizes if needed.<\/span><\/li><\/ol><h3><span style=\"font-weight: 400;\">Modern Trends in Underline Usage<\/span><\/h3><p><span style=\"font-weight: 400;\">Web design trends are constantly evolving, and so is the use of underlines:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Minimalism:<\/b><span style=\"font-weight: 400;\"> Underlines often align with clean, minimalist design aesthetics, emphasizing key elements without visual clutter.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Subtlety:<\/b><span style=\"font-weight: 400;\"> Many websites use underlines sparingly, employing them for subtle hints or hover effects rather than as the primary link indicator.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Creative Flair:<\/b><span style=\"font-weight: 400;\"> Designers sometimes experiment with double underlines, dashed underlines, or underlines positioned further away from the text as a unique stylistic touch.<\/span><\/li><\/ol><h3><span style=\"font-weight: 400;\">Best Practices for Effective Underlines<\/span><\/h3><p><span style=\"font-weight: 400;\">To ensure your use of underlines enhances your website&#8217;s design:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistency:<\/b><span style=\"font-weight: 400;\"> Establish a clear visual language for how you use underlines (color, thickness, style) throughout your site.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Clarity:<\/b><span style=\"font-weight: 400;\"> Avoid using underlines in a way that confuses users or disrupts the reading flow.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Don&#8217;t Overdo It:<\/b><span style=\"font-weight: 400;\"> Excessive underlining can make your website look cluttered and unprofessional.<\/span><\/li><\/ol><h3><span style=\"font-weight: 400;\">The Elementor Advantage<\/span><\/h3><p><span style=\"font-weight: 400;\">Elementor website builder empowers you to implement these design principles with ease:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"27857\">Responsive<\/a> Controls:<\/b><span style=\"font-weight: 400;\"> Fine-tune the appearance of underlines across different devices directly within Elementor&#8217;s editor.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Global Styling:<\/b><span style=\"font-weight: 400;\"> Set site-wide underline preferences to maintain consistency and streamline your design process.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"27858\">Theme Builder<\/a> Integration:<\/b><span style=\"font-weight: 400;\"> Control how underlines appear throughout your entire WordPress theme for a cohesive look.<\/span><\/li><\/ol><h2><span style=\"font-weight: 400;\">Beyond Underlining: Elementor&#8217;s Website Building Power\u00a0<\/span><\/h2><p><span style=\"font-weight: 400;\">While we&#8217;ve focused on mastering underlines, it&#8217;s important to remember they are just one tool in your web design arsenal. Elementor website builder unlocks a vast array of possibilities to elevate your entire website:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Custom Fonts and Typography:<\/b><span style=\"font-weight: 400;\"> Choose fonts that pair beautifully with your underline styles and enhance your website&#8217;s overall personality.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexible Layouts:<\/b><span style=\"font-weight: 400;\"> Experiment with grids, columns, and spacing to create layouts where your underlines perfectly complement the surrounding content.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visual Effects:<\/b><span style=\"font-weight: 400;\"> Combine underlines with backgrounds, shadows, animations, and other elements to achieve unique and eye-catching designs.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Complete Design System:<\/b><span style=\"font-weight: 400;\"> Elementor&#8217;s global styling system ensures consistency across your site. Underlines become an integral part of your cohesive visual language.<\/span><\/li><\/ul><h2><span style=\"font-weight: 400;\">Conclusion\u00a0<\/span><\/h2><p><span style=\"font-weight: 400;\">Throughout this guide, we&#8217;ve explored the world of CSS underlines \u2013 from the basics to advanced customization and design considerations. Underlines, whether simple or stylized, can be a versatile tool to guide attention, enhance visual hierarchy, and add a touch of personality to your website.<\/span><\/p><p><span style=\"font-weight: 400;\">Remember these key takeaways:<\/span><\/p><ol><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Intentional Use:<\/b><span style=\"font-weight: 400;\"> Employ underlines strategically to support your website&#8217;s design goals rather than relying on them indiscriminately.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibility in Mind:<\/b><span style=\"font-weight: 400;\"> Always consider accessibility when using underlines, maintaining clear contrast, and providing alternative visual cues when necessary.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>The Power of CSS:<\/b><span style=\"font-weight: 400;\"> CSS gives you granular control over the appearance and behavior of underlines.<\/span><\/li><\/ol><p><span style=\"font-weight: 400;\">With Elementor website builder, you have the ideal platform to bring your underlying concepts to life. Elementor&#8217;s intuitive tools empower you to experiment, customize, and seamlessly integrate underlines into your overall web design.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.<\/p>\n","protected":false},"author":2024234,"featured_media":45581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[512],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-1299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Underline Text In CSS? (CSS text-decoration property)<\/title>\n<meta name=\"description\" content=\"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Underline Text In CSS? (CSS text-decoration property)\" \/>\n<meta property=\"og:description\" content=\"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-23T08:37:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-07T14:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"How To Underline Text In CSS? (CSS text-decoration property)\",\"datePublished\":\"2025-02-23T08:37:57+00:00\",\"dateModified\":\"2025-12-07T14:33:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\"},\"wordCount\":1854,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Resources\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\",\"name\":\"How To Underline Text In CSS? (CSS text-decoration property)\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-02-23T08:37:57+00:00\",\"dateModified\":\"2025-12-07T14:33:56+00:00\",\"description\":\"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/elementor.com\/blog\/category\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Underline Text In CSS? (CSS text-decoration property)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Underline Text In CSS? (CSS text-decoration property)","description":"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.","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:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How To Underline Text In CSS? (CSS text-decoration property)","og_description":"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.","og_url":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-02-23T08:37:57+00:00","article_modified_time":"2025-12-07T14:33:56+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Itamar Haim","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"How To Underline Text In CSS? (CSS text-decoration property)","datePublished":"2025-02-23T08:37:57+00:00","dateModified":"2025-12-07T14:33:56+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/"},"wordCount":1854,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Resources"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/","url":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/","name":"How To Underline Text In CSS? (CSS text-decoration property)","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-02-23T08:37:57+00:00","dateModified":"2025-12-07T14:33:56+00:00","description":"Underlines in web design serve various purposes. They can draw attention to important headings, create a visual separation between sections of content, or even suggest clickable elements. While the traditional use of underlines strongly signals hyperlinks, contemporary web design offers a greater degree of flexibility in how underlines are implemented.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/elementor.com\/blog\/category\/resources\/"},{"@type":"ListItem","position":3,"name":"How To Underline Text In CSS? (CSS text-decoration property)"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=1299"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1299\/revisions"}],"predecessor-version":[{"id":146979,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/1299\/revisions\/146979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/45581"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=1299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=1299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=1299"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=1299"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=1299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}