Aligns pseudo element to direct in the navigation bar

Asked

Viewed 43 times

0

I’m having a hard time aligning the :before bar on the right. Can anyone help me with that?

I’m using this code:

.nav-romeu li:before {
    content: '';
    width: 50px;
    height: 2px;
    background: #000;
    position: absolute;
    top: 70px;
    float: left;
}

My website is: amem.romeuadv.com.br

Thanks in advance!

css pseudo-classes pseudo-elements

  • My anti-virus is preventing me from entering the page. Could you put more of the code here? The html menu complete with CSS, at least.

  • https://jsfiddle.net/o3zj7mwy/

1 answer

1


Thanks for Fiddle. If I understand you want the lines to stick to the right of space, correct?

If this is the case, you resolve it with the following additions to your CSS:

li {
    position: relative;
}
.nav-romeu li:before {
  right: 0;
}

Follow the example:

* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none !important;
  list-style-type: none !important;
}

li {
  position: relative;
}

body {
  font-family: Helvetica;
  margin-bottom: 0 !important;
  -webkit-font-smoothing: antialiased;
}

.header-fixed {
  height: 110px;
  width: 100%;
  line-height: 108px;
  background: #fff;
  border-bottom: 3px solid rgb(142, 21, 29);
}

.header-fixed img {
  display: block;
  margin: 10px 0;
}

.nav-romeu {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.nav-romeu li a {
  font-family: "Helvetica";
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  color: rgb(142, 21, 29);
  font-smooth: always;
  display: block;
  padding: 0 15px;
}

.nav-romeu li:before {
  content: '';
  width: 40px;
  height: 2px;
  background: #000;
  position: absolute;
  top: 70px;
  right: 0;
}
<header class="header-fixed">
  <div class="container">

    <ul class="nav-romeu">
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
      <li><a href="#">teste </a></li>
    </ul>
  </div>
</header>

Browser other questions tagged css pseudo-classes pseudo-elements

You are not signed in. Login or sign up in order to post.