outer text
All geek questions in one place

CSS: remove underline from text

I have the following HTML

<div style="text-decoration: underline;"> outer text <div style="text-decoration: none;">inner text</div> </div>

Despite the fact that I used "no" for the "inner text", it is still underlined. Here is an example JS script: http://jsfiddle.net/oj2wj1d6/1/

How to remove underline from "inner text"? I have to maintain the same HTML structure without adding new HTML tags.

+5
source share
2 answers

It’s kind of hacky, but using the ::first-line psueduo selector, it applies style to the first line, so in the example below, I used the (a p ) element to break the text and trigger the action.

This, of course, suggests that the only text you want to underline is the first line of your content. caveat emptor, YMMV, etc.

JSFiddle.net example

HTML:

 <div class="first-line-underline"> outer text a sentence wut yea <p>inner text</p> </div>

CSS

 .first-line-underline::first-line { text-decoration: underline; }

text layout in the Mozilla Developer Network :: first line in the Mozilla Developer Network

+1
source

This is actually the specific behavior in spec :

Text decorations are drawn through streaming elements. This means that it is impossible to disable the text decoration indicated on one of its ancestors on the descendant.

Read more at https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

+9
source

Source: https://habr.com/ru/post/1234930/

More articles:


All Articles