Why a:before gets underlined

Question

How can I remove the underline bellow "-"? I only want the text to be underlined on Hover not the "-"

Many thanks!

HTML

<ul class="menu">
    <li>
      <a href="#">Commercial Property Management</a>
         <ul>
            <li>
               <a href="#">Industrial</a>
             </li>
              <li>
                 <a href="#">Office</a>
               </li>
                  <li>
                    <a href="#">Retail</a>
                   </li>
              <li>
                        <a href="#">Shopping Centres</a>
                    </li>
                    </ul>
                     </li>
                    <li>
                        <a href="#">Mixed-Use Residential Property Management</a>
                    </li>
                </ul>

CSS

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

Because the :before pseudo element is added "before" the **content** of the `a` not in front of the `a` tag — Paulie_D, Aug 05 '14 at 16:11
possible duplicate of [How to remove only underline from a:before](http://stackoverflow.com/questions/8820286/how-to-remove-only-underline-from-abefore) — Paulie_D, Aug 05 '14 at 16:11
Because even though it is called `before` it is actually inserted inside the `a` and hence inherits the parent's setting. From MDN - **::before creates a pseudo-element that is the first child of the element matched** — Harry, Aug 05 '14 at 16:12

Jacob G · Accepted Answer · 2018-07-07T00:36:53.970

3

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

edited Jul 07 '18 at 00:36

answered Aug 05 '14 at 16:15

Jacob G

13,762
3
47
67

display:inline-block did the job. Great. Thank you! – Nesta Aug 05 '14 at 16:16

score 1 · Answer 2 · answered Aug 05 '14 at 16:19

1

content of the :before selector is counted to the a-tag as it creates a pseudo-element within the element.

Add display:inline-block; to the definition to solve this issue.

answered Aug 05 '14 at 16:19

MrTux

32,350
30
109
146

Why a:before gets underlined

2 Answers2