:Hover:Before Text-Decoration None Has No Effects

:hover:before text-decoration none has no effects?

As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:

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

See these answers for more details:

• CSS text-decoration property cannot be overridden by child element
• How do I get this CSS text-decoration override to work?

There isn't any good way around this... the only alternatives that come immediately to mind are:

• Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.

• Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):

  [class^="icon-"]:before, [class*=" icon-"]:before {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-size: contain;
      content: "";
  }
  .icon-email:before {
      background-image: url(icon-mail.svg);
      background-repeat: no-repeat;
  }
  .icon-large:before {
      width: 48px;
      height: 48px;
  }
  a[class^="icon-"]:before, a[class*=" icon-"]:before {
      margin-right: 5px;
      vertical-align: middle;
  }
  

  The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.

  If you do need IE8 support, then you have to fall back to bitmap images:

  .icon-email:before {
      background-image: url(icon-mail.png);
  }
  .icon-email.icon-large:before {
      background-image: url(icon-mail-large.png);
  }
  

How to don't apply hover effects to content added in :before? css

There are 2 things in your code that stop if from working:

• The main reason is the use of display:flex
• you also have the incorrect order for :hover:before but that doesn't matter because it won't work with display:flex anyway.

With the default display for a elements, the text-underline doesn't affect the content added using the :before pseudo-element. However using display:flex changes how it is displayed and causes the text-underline to be added to the content added in a:before as well as the link text:

Working example:

UPDATE: To meet your new new requirement of indentation on a long link and not being able to change the HTML.

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    position: relative;
    text-decoration: none;
    display: block;
    padding-left: 15px;
}

a:before {
    content: '>';
    position:absolute;
    left:0;
    top: 0;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

a:hover:before{
    text-decoration:none;
}

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'><span>This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link</span></a>
</p>
</div>

How to remove only underline from a:before?

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

This is because the CSS specs say:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

_{Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.}

Text-decoration: none not working

You have a block element (div) inside an inline element (a). This works in HTML 5, but not HTML 4. Thus also only browsers that actually support HTML 5.

When browsers encounter invalid markup, they will try to fix it, but different browsers will do that in different ways, so the result varies. Some browsers will move the block element outside the inline element, some will ignore it.

Pseudo Element Hover and text-decoration

As I explained in this other answer, you can use display: inline-block to prevent text-decoration set to an ancestor from propagating to your element:

a {

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

a > [data-icon]:before {

  display: inline-block; /* Avoid text-decoration propagation from `a` */

  content: attr(data-icon);

}

a:hover > [data-icon]:before {

  color: red;

}

<a href="#"><span data-icon="✪"></span>A Link</a>

Applying 'transition' effect to a elements not working properly

you must make underline with after or before and animation it with height or width
as you want
your code must change like below (add this part to your code):

.container a h2
{
  position:relative ;
}

.container a h2::after
{
  position:absolute ;
  width:100%;
  height: 0px ;
  background:#000 ;
  bottom:-5px ;
  left:0 ;
  content : " " ;
  transition: all ease-in-out 0.25s;
}

.container a h2:hover::after {
   height: 5px ;
}

Stop link's :before content from being underlined by rule applied to the link

http://jsfiddle.net/thirtydot/LmvgM/1/

You need to wrap a span around the text inside the a:

<div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

And then change your CSS to this:

.box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover > span { text-decoration: underline; }
.box.blueb a:before { content: "> "; }

.box.blueb a:before:hover { text-decoration: none; } doesn't work because when you set text-decoration: underline on an element (the a), you can't then remove it on a descendant (:before).

:hover doesn't work if hovered on :before pseudo generated content

You need to use pointer-events: none; so that even if you hover the :before generated pseudo content, it will simply behave as if you are hovering the normal button.

.vbt_true:hover:before, .vbt_true.act:before {
    background-position: -14px -31px;
    pointer-events: none;
}

Demo

---

From Mozilla Developer Network :

In addition to indicating that the element is not the target of mouse
events, the value none instructs the mouse event to go "through" the
element and target whatever is "underneath" that element instead.

---

You may find support not that impressive for IE (As usual)...

^{Credits: Mozilla Developer Network}

---

But we always have polyfills available

Browsers don't honor a:visited { text-decoration: none; }

The only CSS property you can apply on a:visited links in most Webkit-based browsers (like Safari) or Blink-based (Chrome and Opera) is color. Anything else won't work. It has something to do with browser history stealing. You can read more about it from here:

http://seclists.org/fulldisclosure/2013/May/13

However you can change the style of all links with a {text-decoration: none;}.

The selector itself is not dangerous, but if you combine it with Javascript's functions like getComputedStyle() things can get pretty ugly and by ugly I mean that other users can view and read your personal browser history.

Mozilla (Gecko engine) limited the selector properties to color, background-color, border-*-color.

---

Related Topics