"Text-Decoration" and the ":After" Pseudo-Element, Revisited

“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 and the :after pseudo-element

I'm doing it in a different way, using attribute selectors, a background image and a padding (as xandy also suggested):

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

This works in IE7 too.

Here's a complete example

In IE7 the PDF icon won't be visible as it does not understand data URIs:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

“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.

Remove text-decoration underline from :after content

Simply apply text-decoration for the link:

a{text-decoration:none;}

demo

How to center text inside :before pseudo element?

The best thing would be to position the before pseudo element absolutely with respect to the span using the popular centering technique:

top: 0;
left: 50%;
transform: translate(-50%, -25px);

Note that -25px is to offset the text above the circles (which has height 25px) - see demo below:

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
  position:relative;
}
span:before {
  content: attr(data-value);
  position: absolute;
  white-space: pre;
  display: inline;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25px);
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Remove text-decoration underline, for a:after in css

you can use one another method also for your question :- demo

I have tried with minimized code :-

HTML

<div class="nav_container">
    <a href="demolink">menu1</a>
    <a href="demolink">menu2</a>
    <a href="demolink">menu3</a>
</div>

CSS

.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}

CSS - make text decoration: underline extend all the way to :before elements

Rather than text-decoration: underline you could work around that by giving to the anchor a couple of properties like display: inline-block plus a width and finally a border-bottom. Just a thought

Is there an opposite CSS pseudo-class to :hover?

Yes, use :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

.child {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.child:not(:hover) {
  opacity: 0.3;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>