Applying Text-Decoration on CSS Generated Content in Ie

Applying text-decoration on css generated content in IE

IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”

There does not seem to a bug a report on this at the IE Feedback Home.

In this case, a suitable workaround might be to use an image as the generated content:

a:before {
    content: url(arrow.png);
}

where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in @EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.

“text-decoration” and the “:after” pseudo-element, revisited

IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.

5.12.3 The :before and :after pseudo-elements

The ':before' and ':after'
pseudo-elements can be used to insert
generated content before or after an
element's content. They are explained
in the section on generated text.

...

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.

I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.

text-decoration on Internet Explorer

As you can see text-decoration is not supported by neither internet explorer or Edge.

Use this site to check for support of various properties across the browsers :
https://caniuse.com/#search=text-decoration

You can use ::after & ::before in CSS to get same effect.They are suppported for almost all browsers

text-decoration solid not supported in IE 10

In CSS2 the text-decoration property was a regular property with the syntax:

none | [ underline || overline || line-through || blink ] | inherit

In the CSS Text Decoration Module Level 3 : the text-decoration property is now a shorthand property with syntax:

<'text-decoration-line'> || <'text-decoration-style'> ||
<'text-decoration-color'>

where the values for <'text-decoration-style'> are:

solid | double | dotted | dashed | wavy

So now you can see why text-decoration:solid; works in Chrome and Firefox, because according to the newer spec - it is perfectly legal code.

Here is the browser support for the new text-decoration properties.

Notice that IE doesn't support the new syntax.

So, like others have mentioned, you should use text-decoration:none for greater browser support.

text-decoration-color not working for IE

see code bellow:

div {

  color: blue; 

  text-decoration: underline;

}

span{

color:black;

}

<div><span>underline below me!</span></div>

CSS text-decoration property cannot be overridden by child element

From the text-decoration spec:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

The answer in the linked question further quotes (I can't find this text in the spec anymore however):

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

And another quote, CSS3 seems to introduce text-decoration-skip, intended to address this by applying the property on the descendant (in your case, <span>):

This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

“text-decoration” and the “:after” pseudo-element, in Firefox 8

I came with up with this http://jsfiddle.net/wGb68/4/

a[href^='http://stackoverflow.com/'] {
    padding-right: 15px;
    display: inline-block; /* not needed, but fixes Chrome and Opera */
}

a[href^='http://stackoverflow.com/']:after {
    font-size: x-small;
    padding-left: 1px;
    content: "SO";
    color: #333;

    position: absolute;
}

Poorly the clearing of the text-decoration only works in Firefox and Opera with this code. I could not bring it to work in any other browser. :/

The display: inline-block is not needed in Firefox, but without it in Opera and Chrome the "SO" don't follows a linebreak, and even overlaps the container.

colour is override and yet text decoration in css

Browsers these days limit what styles you can apply for the :visited state - because otherwise, checking for certain changes in layout via JavaScript allows to determine whether you visited an external URL already.

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions:

Styling restrictions
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector:

Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

---

Related Topics