How to Remove Only Underline from A:Before

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

Remove text-decoration underline from :after content

Simply apply text-decoration for the link:

a{text-decoration:none;}

demo

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

Remove underline on focus from :before element

Use a span inside the link and apply text-decoration: underline on the inner element

a { 
    text-decoration: none; 
}

a span {
    text-decoration: underline;
    padding-left: .5em;
}

a::before  {
    content: "\f058";
    font-family: FontAwesome;
} 

<a href="#"><span>Lorem ipsum</span></a>

How to remove the underline for anchors(links)?

Use CSS. this removes underlines from a and u elements:

a, u {
  text-decoration: none;
}

Sometimes you need to override other styles for elements, in which case you can use the !important modifier on your rule:

a {
  text-decoration: none !important;
}

Remove blue underline from link

You are not applying text-decoration: none; to an anchor (.boxhead a) but to a span element (.boxhead).

Try this:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Why a:before gets underlined

Edit 4 years later: This answer is pretty much a low-quality duplicate of https://stackoverflow.com/a/8820459/3285730. I'd recommend going there and getting an actual explanation.

Try giving it display:inline-block;:

ul.menu li li a:before {
    content: "-";
    margin-right: 8px;
    display:inline-block;
}

JSFiddle Demo

---

Related Topics