Modify a pseudo element with jquery

Question

Modify a pseudo element with jquery

Navigation

#1 by (-1 votes)

0

Does anyone have any idea how to modify a pseudo element with jquery? In a menu bar of a web page, add pseudo elements to underscore the button when hovering, but I want to keep the button on which it is currently underlined.

When doing Hover:

The html code is:

<ul>
    <a href="index.php"><li>INICIO</li></a>
    <a href="deportes.html"><li>DEPORTES</li></a>
    <a href="edicion.html"><li>VIDEOS</li></a>
    <a href="noticia.php"><li>VIRALES</li></a>
    <a href="contacto.html"><li>CONTACTO</li></a>
</ul>

And the css code is:

header ul li{
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
list-style: none;
color: #000;
padding: 15px 20px;
transition: 0.2s;
position: relative;
}

header ul li:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom:3px solid #83354F;
opacity: 0;
}

header ul li:hover:before{
cursor: pointer;
opacity: 1;
}

I would like it to be as youtube has or as other pages have:

html css hover

asked by Marvin Morales 22.11.2017 в 17:21

source

1 answer

Help! difference between form action and $ http.post () Group and add in Mysql

score -1 · Answer 1

You do not have any header class in your code, nor are the li are within the lu, they are inside a.

Add float left (if you want them to the left). Here is to play with sizes and positions.

I have tried a little with those who are not before too. There are a thousand other ways, but I think this one could help you.

header,ul,li{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  list-style: none;
  color: #000;
  padding: 15px 20px;
  transition: 0.2s;
  position: relative;
}

li:hover:before{
  cursor: pointer;
  opacity: 1;
}

li:before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% / 5);
  height: 100%;
  //border-bottom:3px solid #83354F;
  opacity: 0;
}

li{
  float:left;
}

li:hover{
  border-bottom:3px solid #83354F;
}

ul{
  width:100%;
}

<ul>
  <a href="index.php"><li>INICIO</li></a>
  <a href="deportes.html"><li>DEPORTES</li></a>
  <a href="edicion.html"><li>VIDEOS</li></a>
  <a href="noticia.php"><li>VIRALES</li></a>
  <a href="contacto.html"><li>CONTACTO</li></a>
</ul>