CODEWITHSUNDEEP
htmlcsssass
Mike
Mike

Reputation: 107

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

I'm adding '>' in :before property to links, but when apply the :hover effect also take the styles text-decoration: underline; so, I need that don't apply the effect in the content added in :before, I tried resolve this whit this options

a:before {
  content: '> ';
  position: relative;
  display: inline-block;
  margin-right: 5px;
  pointer-events: none;
}

a:before:hover {
  content: '>';
  pointer-events: none;
}

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

but none works.

this is how links behave with hover

this is how links behave with :hover

here is an example of my code, the structure, <a> inside <p> is because the content is from a text editor

.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 {
    left: 0px;
    display: flex;
    position: relative;
    left: 0;
    display: flex;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
  }
  
  
  a:hover{
    text-decoration:underline;
  }
<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>

Upvotes: 0

Views: 330

Answers (2)

Lam Anh Vu
Lam Anh Vu

Reputation: 24

I think you misplaced location hover a:hover:before

Upvotes: 0

FluffyKitten
FluffyKitten

Reputation: 14312

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>

Also, FYI, the correct way to use :hover and :before together is :hover:before, but in this case it doesn't make a difference when you are using display:flexas you can see below:

Example using the correct CSS a:hover:before with display:flex (and as you can see it doesn't work):

.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 {
    left: 0px;
    display:flex;
    position: relative;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
    text-decoration:none!important;
}
  
a:hover{
    text-decoration:underline;
  }
a:hover::before {
    text-decoration:none!important;
  }
<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>

Upvotes: 2

Related Questions