Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Line-through with a color different from the text color? [duplicate]

I’d like to have gray text with a red strike-through, but this style doesn’t work:

color: #a0a0a0; text-decoration: line-through 3px red;  

What am I doing wrong?

like image 790
Tony the Pony Avatar asked Dec 06 '10 07:12

Tony the Pony


People also ask

How do I change the color of a line in CSS?

The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links.

How do I strikethrough text in CSS?

You can also use the <del> tag for crossed-out text, which is more semantically correct. However, the <del> tag doesn't always work in all browsers. So, if you need to ensure that your text is readable in any browser, the <strike> tag is a good fallback. CSS can also be used to style strikethrough text.

How do you change the color of text underline in CSS?

Underline tag: To change the color of the underline, we need to add some styling using CSS (inline/internal/external). By default, the color of the underline is black. In CSS, we will use text-decoration property to style underline.

How do I make text a different color in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.


1 Answers

You can simulate the desired effect with two nested elements, e.g.:

        span.inner {              color: green;          }          span.outer {              color: red;              text-decoration: line-through;          }
<span class="outer">      <span class="inner">foo bar</span>  </span>

jsfiddle

like image 154
Benjamin Wohlwend Avatar answered Oct 08 '22 15:10

Benjamin Wohlwend